element-UI+VUE 实现el-table双击单元格编辑（智能操作！不沙雕！看我就对了）

浏览了很多智慧的结晶，要么操作傻瓜，要么过于复杂（不必要的），还有的虽然实现了操作，但逻辑上让我难受。所以自己实操成功后整合一篇。

本篇博客涉及到的点有：（后面详解）

1. el_table双击单元格实现编辑操作
2. el-input回车操作enter与失焦事件blur冲突（会触发两次导致操作异常）
3. 如果是组件之间操作，tableData是从父组件通过props接过来的，在本子页面中定义了另一个空数组赋值过来，需要增加this.tableData = [...this.tableData]操作，
4. el-input的autofocus只有第一次触发，如何解决。

思路是：给每一个需要可操作的单元格内容增加各自对应的标志位flag，通过变flag的值为true或false，判断显示文字内容或input内容。

下面详解：

第一步：从父组件接收表格内容（如果是单页面操作此步省略）

      props:{
        tab2list:Array,
      },

第二步：data中定义一个空数组，准备赋值表格内容，页面绑定这个空数组（也可以直接绑定tab2list，那就省略这一步，后面所有的tableData替换为tab2list即可）

      data() {
        return {
          tableData:[],//用来展示
        };
      },

第三步：编写代码。首先是template部分。

<el-table
  max-height="650"
  :data="tableData"
  style="width: 100%">
  <el-table-column
    :show-overflow-tooltip="true"
    align="center"
    prop="enddate"
    label="日期"
    sortable
    width="250">
    <template slot-scope="scope">
      <div @dblclick="changeEnddate(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
        <span v-show="!scope.row.edit_enddate">{{scope.row.enddate}}</span>
        <!--:autofocus="true"-->
        <el-input :ref='"enddateinput"+scope.$index'
                  @blur="enddateblur(scope.$index,scope.row)"
                  @keyup.enter.native="$event.target.blur"
                  clearable
                  v-show="scope.row.edit_enddate"
                  size="mini"
                  v-model="scope.row.enddate"
                  placeholder="请输入内容"></el-input>
      </div>
    </template>
  </el-table-column>
  <el-table-column
    :show-overflow-tooltip="true"
    align="center"
    label="数据"
    width="230">
    <template slot-scope="scope">
      <div @dblclick="changeValue(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
        <span v-show="!scope.row.edit_value">{{scope.row.value}}</span>
        <!--:autofocus="true"-->
        <el-input :ref='"valueinput"+scope.$index'
                  @blur="valueblur(scope.$index,scope.row)"
                  @keyup.enter.native="$event.target.blur"
                  clearable
                  v-show="scope.row.edit_value"
                  size="mini"
                  v-model="scope.row.value"
                  placeholder="请输入内容"></el-input>
      </div>
    </template>
  </el-table-column>
</el-table>

然后是各个方法。请注意注释。

changeEnddate(index,rowdata){
  this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;//直接加key
  this.tableData = [...this.tableData];//因为我table绑定的表格数据是后接过来赋值的，所以需要这步操作，如果没有1、2步骤这个可以不加。后面也一样

  setTimeout( ()=> {//定时器是为了避免没有获取到dom的情况报错，所以象征性的给1毫秒让他缓冲
    this.$refs['enddateinput' + index].focus()
    //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
  }, 1)
},
enddateblur(index,rowdata){
  //enter方法和blur方法冲突的解决办法，就是在让他们触发同一个方法。具体看template里是怎么写的
  this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;
  this.tableData = [...this.tableData];
},
changeValue(index,rowdata){
  this.tableData[index].edit_value = !this.tableData[index].edit_value;
  this.tableData = [...this.tableData];

  setTimeout(() => {
    this.$refs['valueinput' + index].focus()
  }, 1)
},
valueblur(index,rowdata){
  this.tableData[index].edit_value = !this.tableData[index].edit_value;
  this.tableData = [...this.tableData];
},

 

注意：

1、el-table有一个双击单元格的方法  cell-dblclick ，也可以通过这个方法进行单元格操作，如果不是所有的列都需要触发事件，可以通过column.label（列名）判断某一列是否触发，下面举例。

editCell(row, column, cell, event){
     // console.log(row,'row');当前行的所有键值内容
     // console.log(column,'column');当前列的信息
     // console.log(cell,'cell');单元格信息
     // console.log(event,'event');事件信息
     //一般就用到前两个

     if(column.label == '用户'){
         row.edit_enddate = !row.edit_enddate;
     }
     if(column.label == '时间'){
         row.edit_value = !row.edit_value;
     }
}

2、这也是一种可以使el-table可以编辑的方案，极不推荐，纯原生操作，下面我说一下缺点。当然你想拿来练手我不拦你。

• 操作沙雕。必须在光标在input框里再点击别的地方才能触发删除input框的blur方法，哪个用户会愿意这样操作？
• 用户体验极差。多次双击会创建多个input框，还需要再给他添加flag值，如果已经有一个就不允许再添加了，麻烦。
• 样式丑。通过双击事件可以新建原生input框，需自己写css样式，很难搞，尝试加类名但是失败了，只能一个个样式给，丑的一比。

        let columnContent = "";
          if(column.label == '时间'){
            columnContent = row.enddate;
          }
          if(column.label == '内容'){
            columnContent = row.value;
          }

          if (column.label != "") {
            event.target.innerHTML = "";
            let cellInput = document.createElement("input");
            cellInput.value = columnContent;
            cellInput.setAttribute("type", "text");
            cellInput.setAttribute("autofocus", "autofocus");
            // cellInput.classList.add("add-input");
            cellInput.style.width = "80%";
            cellInput.style.height = "35px";
            cellInput.style.outline = "none";
            cell.appendChild(cellInput);
            cellInput.onblur = ()=> {
              cell.removeChild(cellInput);
              event.target.innerHTML = cellInput.value;
              // console.log(this.tableData,'tabledata');
              this.$emit('editCell',this.tableData)
              if(column.label == '时间'){
                row.enddate = cellInput.value;
              }
              if(column.label == '内容'){
                row.value = cellInput.value;
              }
            };
          }

 

有任何问题欢迎下方留言或者私信，看到会回复。实测可用~