需求

表格中，某一列需要点击修改。并且能拦截回车事件。

解决方案

vue代码

<el-table
    ref="menuTable"
    ……
    @cell-click="clickCell"
>
    <el-table-column align="center" label="排序" prop="order" width="80">
        <template #default="{ row }">
            <el-input
                v-if="row.editOrder === true"
                :ref="'input-order-' + row.menuid"
                v-model="row.order"
                size="mini"
                @blur="changeOrder(row)"
                @keyup.enter.native="$event.target.blur()"
            />
            <span v-else>{{ row.order }}</span>
        </template>
    </el-table-column>
</el-table>

JS methods 方法

      clickCell(row, col) {
        if (col.property === 'order' && !row.editOrder) {
          this.$set(row, 'editOrder', true)
        }
        this.$nextTick().then(() => {
          this.$refs['input-order-' + row.menuid].focus()
        })
      },

      changeOrder(row) {
        // 修改提交数据
        this.$set(row, 'editOrder', false)
      },

关键点

1. el-table上面加cell-click事件
2. el-table-column中使用自定义模板，以当前row数据editOrder作为修改入口，判断是否显示input；PS：editOrder是自定义的哦
3. input失去焦点时，向后台提交数据。

最佳体验

1. input显示后，如何自动获取焦点？自动获取焦点才能自动失去焦点。
   尝试过很多方式，没办法只能用ref方式，给input通过row主键定义不同的ref，然后就可以去控制自动获取焦点和失去焦点了。
2. input怎么拦截回车？
   拦截回车@keyup.enter.native，但如果拦截回车到和blur一样的方式，那么数据可能会提交2次，因此回车让input失去焦点，是最佳体验，因此得出：@keyup.enter.native="$event.target.blur()"

总结

通过以上例子，也可以写出点击任意单元格，编辑整行的写法。