Element-ui可能遇到的问题（持续更新）

引入日期时间的时候遇到英文问题？

需要在main.js配置这句话：
import locale from “element-ui/lib/locale/lang/zh-CN”;
Vue.use(ElementUI, {locale})
表示全局配置element 多语言 组件。

选择完成的日期时间结果打印。

框架返回的时间是这样的：Fri Nov 10 2000 04:01:01 GMT+0800 (中国标准时间)，可以通过以下方式转换成：2000-11-10 4:1:1
let Day = new Date(e[0]);
let Time=Day.getFullYear() +“-” +this.double(d.getMonth() + 1) + “-” +this.double(d.getDate()) + " " +this.double(d.getHours())+“:” +this.double(d.getMinutes()) +“:” +this.double(d.getSeconds());

double(num) {

if (num < 10) {

return “0” + num; //如果时分秒少于10，则在前面加字符串0
} else {

return “” + num; //否则，直接返回原有数字
}
}

根据条件高亮数据

在table标签上添加次函数 :row-class-name=“tableRowClassName”。
tableRowClassName({row, rowIndex}) {

if (row.money > 5000) {

return ‘money-row’
}
}
然后筛选条件返回一个类名。
:row-class-name 是在 td 上添加类名，还有 :cell-class-name 往 tr 上面加。

循环表头

在table表格中如果头部不固定可以这样写~

<el-table-column
  	 v-for="(item, i) in ClothesSize"
     :prop="item.prop"
     :key="i"
     :label="item.size"
     width="180">
</el-table-column>

在 ClothesSize 里面 size就是标题，prop 这个属性名是表示使用 table 里面的 :data=“tableDataClothes” 的数据。

隐藏的 el-scrollbar 组件

element中有个隐藏的组件官方并未给出文档，他是自带的一个自定义滚动组件，也是非常好用的~

<el-scrollbar wrap-class=""  view-class="" :native="false" >
	......
</el-scrollbar>

只要用这个标签包住左侧导航栏就可以了，wrap-class是设置他子标签的class类名，view-class是设置子标签的子标签类名，native是选择是否显示组件的滚动条。

树形控件无法默认选中

  this.$nextTick(() => {
      this.$refs.tree.setCheckedKeys(arr);
  });

固定表头的表格切换tab样式错乱

如图：

这个是因为固定表头的是两个table 定位上去的所以会错乱，这时候只需要v-if 重新渲染即可！

 v-if="activeName === 'first'"

Tooltip文字提示配合Tabs 标签

  <el-tab-pane
                  v-for="(item, index) in editableTabs"
                  :key="index"
                  :label="item.custName"
                  :name="index.toString()"
                >
                  <span slot="label">
                    <el-tooltip  class="item" effect="light" :content="item.custName" placement="bottom">
                      <span >{ 
   { 
   item.custName}}</span>
                   </el-tooltip>
                  </span>
</el-tab-pane>

修改table文字

 <el-table>
	 <template slot="empty" >
	     <span >这里暂无数据</span>
	 </template>
  </el-table>

tabs中加form表单校验

 <el-form ref="formRef" :model="tabsObj" :rules="rules" label-position="right" label-width="150px" size="small">
        <el-tab-pane v-for="(item, i) in tabsObj.pmsCtrtDtlList" :key="i" :label="'(规格' + (i+1) + ')' + item.mtr_mdl" :name="i + ''">	
		   <el-row :gutter="24" class="">
                <el-col :span="12">
                  <el-form-item label="：" :prop="`pmsCtrtDtlList.${i}.dlvy_date`" :rules="rules.dlvy_date" >
                    <el-date-picker
                        :disabled="idDisabled"
                        size="small"
                        v-model="item.dlvy_date"
                        type="date"
                        clearable
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
 </el-tabs>
   </el-form>

 rules:{
        dlvy_date: [{ required: true, message: '请输入合同交期', trigger: 'blur' }],
        project_sign: [{ required: true, message: '请输入项目标识', trigger: 'blur' }],
        ws_sign: [{ required: true, message: '请选择制造车间', trigger: 'blur' }],
        motor_code: [{ required: true, message: '请输入电机代号', trigger: 'blur' }],
        base_code: [{ required: true,  message: '请输入机座', trigger: 'blur' }],
      },

   this.$refs.formRef.validate(async valid => {
        if (valid) {
  			 }
      })

表格删除选中行

            <el-button style="margin-left: 30px" size="mini" type="danger" @click="deleteFn(selectedRowKeys)">删除</el-button>


 deleteFn(selections){
      if (selections.length > 0) {
        this.$confirm(`确定删除选中数据?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          for (let i = 0; i < selections.length; i++) {
            for (let y = 0; y < this.datas.length; y++) {
              if (this.datas[y].index == selections[i].index) {
                console.log(this.datas[y].index, selections[i].index);
                this.datas.splice(y, 1);
                break;
              }
            }
          }
          console.log(this.datas, '=this.datas');
        })
        .catch(() => {});
      } else {
        this.$message({ message: "请选择要删除的数据", type: "warning" });
        return false;
      }
    },

使用远程搜索下拉框，右侧icon消失

/deep/ .el-select {
  .el-select__caret:first-child::before {content: "\e6e1";}
  .is-focus {.el-select__caret:first-child {transform: rotateZ(0deg);}}
}