el-table表格内双击或单击单元格编辑输入框、日期等

需求

在el-table中想要直接点击单元格直接由文字显示变为编辑框状态，而非一整行编辑或者通过展示模态框编辑，这样目标性会比较清楚且页面较简洁。下面直接上代码！

html代码

<template>
  <!-- table表格内行内编辑input、日期组件等 -->
  <div id="app">
    <!--  @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件，将文字变成input输入框,也可以使用单击事件@cell-click=''-->
    <el-table ref="table" :data="tableList" border style="width: 100%" @cell-dblclick="tableDbEdit">
      <!-- 编辑input组件-->
      <el-table-column prop="name" label="工作名称">
        <template slot-scope="scope">
          <!-- 条件判断如果满足则显示表单，否则默认展示文字 -->
          <el-input v-model="scope.row.name" v-if="showInput == `name${scope.row.id}`"
            @blur='blurInput(scope.row.id,"name",scope.row.name)' v-focus>
          </el-input>
          <p v-else>{{scope.row.name}}</p>
        </template>
      </el-table-column>
      <!-- 编辑日期组件-->
      <el-table-column prop="planStartTime" label="预计开始" align="center">
        <template v-slot="scope">
          <el-date-picker v-model="scope.row.planStartTime" v-if="showInput == `planStartTime${scope.row.id}`"
            type="date" :clearable="false" value-format="yyyy-MM-dd" placeholder="请选择开始日期"
            @blur='blurInput(scope.row.id,"planStartTime",scope.row.planStartTime)' v-focus>
          </el-date-picker>
          <p v-else>{{scope.row.planStartTime}}</p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

js代码

<script>
export default {
  data() {
    return {
      //表格数据
      tableList: [
        {
          id: 0,
          name: "规划许可阶段",
          planStartTime: "2021-03-09"
        },
        {
          id: 1,
          name: "施工许可阶段",
          planStartTime: "2021-03-09"
        }
      ],
      showInput: "",
      oldData: {}
    }
  },
  directives: {
    // 通过自定义指令实现的表单自动获得光标的操作
    focus: {
      inserted: function(el) {
        if (el.tagName.toLocaleLowerCase() == "input") {
          el.focus()
        } else {
          if (el.getElementsByTagName("input")) {
            el.getElementsByTagName("input")[0].focus()
          }
        }
        el.focus()
      }
    },
    focusTextarea: {
      inserted: function(el) {
        if (el.tagName.toLocaleLowerCase() == "textarea") {
          el.focus()
        } else {
          if (el.getElementsByTagName("textarea")) {
            el.getElementsByTagName("textarea")[0].focus()
          }
        }
        el.focus()
      }
    }
  },
  // 方法
  methods: {
    // 当input失去光标后进行的操作
    async blurInput(id, name, value) {
      let obj = {}
      // 判断数据是否有所改变，如果数据有改变则调用修改接口
      if (this.oldData[name] != value) {
        obj[name] = value //被改变的数据
        // 然后再写调用接口，提交内容的东西就可以了
        console.log("===值改变了")
      }
      this.showInput = ""
    },
    /*
    方法参数皆为框架方法的默认传参
    row     行数据
    column  被点击的触发了方法的单元格
    event   事件
    */
    tableDbEdit(row, column, event) {
      this.showInput = column.property + row.id
      this.oldData[column.property] = row[column.property]
    }
  }
}
</script>