vue+element表格双击编辑单元格

思路：给每条对应的数据都加上edit:false/true属性来控制该条数据对应的单元格你内显示的是输入框还是文本内容

html部分
1、element文档中有写关于表格的事件


2、每条数据对应都有edit属性，为true的时候显示输入框，为false显示文本内容

js部分：
1、统一给获取到的表格数据加入edit属性，默认为false,传入的参数t为表格的数据json

   initTbale(t) {
      t.forEach((item, index) => {
        for (let i in item) {
          item[i] = {
            value: item[i],
            edit: false
          };
        }
      });
    },

2、双击的时候让当前点击的数据edit为true,并获取焦点

    celledit(row, column, cell, event) {
      if (row[column.property]) {
        row[column.property].edit = true;
        setTimeout(() => {
          this.$refs[column.property].focus();
        }, 20);
      }
    },

3、失去焦点的时候可以使所有数据的edit都变为flase

    // --table统一设置为不可编辑状态
    noeditTbale(t) {
      t.forEach((item, index) => {
        for (let i in item) {
          item[i].edit = false;
        }
      });
    }

4、如果失去焦点要上传数据，一定记得把edit属性去掉

    // 逆向初始化 --table去掉编辑属性
    reverseTbale(t) {
      t.forEach((item, index) => {
        for (let i in item) {
          item[i] = item[i].value;
        }
      });
    },

…
这样 简单地双击编辑单元格就完成了