element ui 双击表格展示输入框 修改数据

展示：

        

 功能：就是一个简单的table表格 通过双击某一项 进行修改。（其实就是双击之后变成一个input框。。。）

实现：

1. 在table标签里添加3个方法。

      @cell-dblclick="tabClick"
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName"

cell-dblclick ： 当某个单元格被双击击时会触发该事件

cell-dblclick

当某个单元格被双击击时会触发该事件

row, column, cell, event

row-class-name ： 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。

row-class-name

行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。

Function({row, rowIndex})/String

cell-class-name ： 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。

cell-class-name

单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。

Function({row, column, rowIndex, columnIndex})/String

具体参考 element ui 的 table   https://element.eleme.cn/#/zh-CN/component/table

2.在table标签中  el-table-column标签  内加入 template 标签内容

      <el-table-column
        label="这是名称"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="scope.row.index === clickRow && scope.column.index === clickCell">
            <el-input
              ref="editInput"
              v-model="scope.row.position"
              maxlength="300"
              size="mini"
              @blur="inputBlur"
            />
          </div>
          <div v-else>{{ scope.row.position }}</div>
        </template>
      </el-table-column>

data里

      clickRow: null, // 当前点击的行
      clickCell: null, // 当前点击的列
      tabClickLabel: "", // 当前点击的列名

methods里

    // 控制input显示 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      var that = this
      switch (column.label) {
        case "这是名称":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "这是第二个":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },

    // 把每一列的索引放进column
    tableCellClassName({ column, columnIndex }) {
      column.index = columnIndex;
    },

    // 失去焦点初始化
    inputBlur(row, event, column) {
      var that = this
      that.clickRow = null;
      that.clickCell = null;
      that.tabClickLabel = "";
    },

原理就是 当我进行 dblclick 的时候我就能拿到我双击的哪个单元格，然后把他的行列储存起来 用于判断是哪个input框显示

最后修改完成后 失去焦点后就复原 将 input 隐藏起来。

（其实 tabClickLabel 我没有用到，但是为了严谨点 你也可以在上面判断条件再多加一条关于 tabClickLabel 的判断）

 借鉴于： elementUI双击表格展示输入框

 https://www.jianshu.com/p/8ae99908dff5