element-ui 使用笔记

1.两个el-date-picker或许作为对方的限制 用官方提供的:picker-options

template部分

<el-date-picker
            v-model="form.actual_start_time"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerStart"
            @change="actualstartchange"
          >
          </el-date-picker>

data部分

//配置给实际开始时间的规则
      pickerStart: {
        disabledDate: (time) => {
          return this.pickDateStart(time);
        },
      },
      //配置给实际结束时间的规则
      pickerEnd: {
        disabledDate: (time) => {
          return this.pickDateEnd(time);
        },
      },

methods部分

 //实际开始日期规则的后续 这里的值为true的时候会被禁用掉 这里控制时间选择器的天
    pickDateStart(time) {
      if (this.form.actual_stop_time) {
        let temp=this.form.actual_stop_time.split(' ')[0]
        if((this.dateForma(time)===temp)){
          return false
        }
        return (time.getTime() >= new Date(temp));
      } else {
        return false;
      }
    },

实现的效果

2.关于弹框el-select的值置空一次之后无法正常的回显

导致这种状况的原因是因为它只会首次渲染一次 加一个change事件调用一下官方的方法就能解决了

 @change="$forceUpdate()"

3.关于一个页面上两个表格其中一个配置了expand属性之后大家开始互相影响

遇到这种情况的话首先给页面上的表格加唯一key 唯一key值能解决很多el-element的奇怪问题

 4.关于el-table表格内置编辑框

这时候就需要用到我们亲爱的排他了

template

<el-table-column prop="department_name" label="部门名称">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.department_name"
          ></el-input>
          <div v-else>{{ scope.row.department_name }}</div>
        </template>
      </el-table-column>
<el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editchange(scope.row.id, scope.row)"
            v-if="!scope.row.isEdit"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="savechange(scope.row)"
            v-else
            >保存</el-button
          >
        </template>
      </el-table-column>

data类型

{
    id:'xxx',
    isEidt:false,
    xxxx:xxxx
}

methods

 editchange(id, row) {
      let temp = _.cloneDeep(row);
      this.temprowdata = temp;
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].isEdit = false;
        if (this.tableData[i].id === id) {
          this.tableData[i].isEdit = true;
        }
      }
    },
  savechange(row) {
      if(row.isCreate){
        xxxx
       
      }else{
       xxxx
      //没更改的就普通的排他
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === row.id) {
          this.tableData[i].isEdit = false;
          break;
        }
      }
      }
      
    },

效果图

今天先这里啦