需求

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

解决方案

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()"

总结

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