ElementUI经验总结

样式穿透

从浏览器中找到需要改动的组件父class，在CSS文件中通过::v-deep或/deep/进行样式改动
两种方式

1. 外层容器 >>> 组件名（在less中使用)
2. 外层容器 /deep/ 组件名 (在less中使用)

<style lang='less' scoped>
  .box >>> .el-checkbox__inner {
    border-radius: 50%;
  }
  .box {
    /deep/ .el-checkbox__inner {
      border-radius: 50%;
    }
  }
</style>

下拉框选项从后台获取并设置第一个默认选中

<div class="selectBox">
    <span>品牌</span>
    <el-select v-model="businessPreSelect" placeholder="请选择" size="mini" class="select" @change='change'>
        <el-option
          v-for="item in businessSelect"
          :key="item.brandId"
          :label="item.brandName"
          :value="item.brandId">
        </el-option>
    </el-select>
</div>
data(){
      return{
        businessPreSelect: '',
        businessSelect: []
      }
   }
methods:{
    //初始化品牌下拉
    initBussinessSel(){
        getHeziSalesPlanParams().then(res => {
            this.businessSelect = res.data //获取所有选项，包含brandId和brandName的对象数组
            if(this.businessSelect != null){
                this.businessPreSelect = this.businessSelect[0].brandId // 预选中第一项
            }
        }).catch(error => {
            console.log(error)
            reject(error)
        })
    }
}

el-upload模拟点击

<button @click="handleUpload">上传文件</button>
<el-upload
  v-show="false"
  class="upload-resource"
  multiple
  action=""
  :http-request="clickUploadFile"
  ref="upload"
  :on-success="uploadSuccess"
>
    上传本地文件
</el-upload>
 
<script>
export default {
    methods: {
        // 模拟点击
        handleUpload() {
            document.querySelector(".upload-resource .el-upload").click()
        },
        // 上传文件
        async clickUploadFile(file) {
            const formData = new FormData()
            formData.append('file', file.file)
            const res = await api.post(`xxx`, formData)
        }
        // 上传成功后，清空组件自带的文件列表
        uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

el-select下拉框选项过长

设置下拉框的内容过长时，单行略加文字提示

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
        <el-tooltip
          placement="top"
          :disabled="item.label.length<17"
        >
            <div slot="content">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
    </el-option>
</el-select>
 
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
        }],
        value: ''
      }
    }
  }
</script>
 
<style scoped>
.el-select {
  width: 300px;
}
.el-select ::v-deep .popper-class {
  width: 300px;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

el-input首尾不能为空格

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>
 
<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

el-input type=number 输入中文，焦点上移

当el-input设置type='number'的时候，输入中文，中文不会显示出来，但焦点会上移

<style scoped>
::v-deep .el-input__inner {
    line-height: 1px !important;
}
</style>

去除聚焦的时候上下箭头

<el-input class='clear-number-input' type='number'></el-input>
<style scoped>
  .clear-number-input ::v-deep input[type='number']::-webkit-outer-spin-button,
   .clear-number-input ::v-deep input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
</style>

el-form只校验表单其中一个字段

有时候需要校验一些字段，eg: 发送验证码，单独对手机号进行校验

this.$refs.form.validateField('name', valid => {
  if(valid) {
    console.log('send!');
  } else {
    console.log('error send!');
    return false;
  }
});

el-dialog重新打开弹窗，清除表单信息

打开弹窗的时候，在$nextTick中重置表单，或在关闭弹窗后进行重置；

<el-dialog @closed='resetForm'>
  <el-form ref='form'>
 
  </el-form>
</el-dialog>
 
<script>
  export default {
    methods: {
      resetForm() {
        this.$refs.form.resetFields();
      }
    }
  }
</script>

el-dialog的destory-on-close属性设置无效

destroy-on-close设置为true后发现弹窗关闭后DOM元素还是会存在，没有被销毁
解决办法： 在el-dialog上添加v-if

<el-dialog :visible.sync='visible' v-if='visible' destroy-on-close>
 
</el-dialog>

el-table表格内容超出省略

当表格内容过长的时候，手动添加样式比较麻烦，可以添加 show-overflow-tooltip
<el-table-column
  prop="address"
  label="地址"
  width="180"
  show-overflow-tooltip
>
 
</el-table-column>

表格中根据不同状态切换样式

 :type="
                scope.row.status == '已接单'
                  ? 'primary'
                  : scope.row.status == '派送中'
                  ? 'success'
                  : scope.row.status == '已送达'
                  ? 'primary'
                  : 'danger'
              "
 
    <el-table-column
          prop="status"
          v-if="orderMStatus != '已完成'"
          fixed="right"
          label="订单状态"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status == '已接单'
                  ? 'primary'
                  : scope.row.status == '派送中'
                  ? 'success'
                  : scope.row.status == '已送达'
                  ? 'primary'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>