vue elementui table 雙擊單元格實現編輯，聚焦，失去焦點，顯示隱藏input和span

<el-table :data="tableData"
          class="tb-edit"
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          highlight-current-row
          @cell-dblclick="dblhandleCurrentChange"
>

dblhandleCurrentChange(row, column, cell, event) {
  switch (column.label) {
    case "經度(°)":
      row.longitudeflag = true;
      break;
    case "緯度(°)":
      row.dimensionflag = true;
      break;
    case "距離(m)":
      row.heightflag = true;
      break;
  }
},

 

聚焦需要加如下代碼在公用js里面：

Vue.directive('focus', function (el, option) {
  var defClass = 'el-input', defTag = 'input';
  var value = option.value || true;
  if (typeof value === 'boolean')
    value = { cls: defClass, tag: defTag, foc: value };
  else
    value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
  if (el.classList.contains(value.cls) && value.foc)
    el.getElementsByTagName(value.tag)[0].focus();
});


失去焦點方法：

inputblur(row, event, column) {
  let tableD = this.tableData;
  tableD.forEach(function (item) {
    item.longitudeflag = false;
    item.dimensionflag = false;
    item.heightflag = false;
  });
},