table表格左键双击，单元格可编辑效果

1) 效果，修改内容后数据同步修改:

2) 思路

1、el-table提供了左键双击事件。

2、左键双击后，该单元格更改为input框后，input框需要获取焦点。

3、输入内容后，(回车按钮或者点击其他位置input框失去焦点)，数据需要更改，emit 数据给父组件。

3) 简单的写一下.vue文件代码

前端代码在这里：https://github.com/wwaini/tao-vue3/tree/release240625

后端代码笔者用node写的，在这里：https://github.com/wwaini/tao-express

父组件

<template>
  <div>
    <test :tableData="tableData" v-if="DataFlag" @pushDataValue="pushDataValue"></test>
  </div>
</template>
<script setup>
import test from '@comp/test/test.vue'
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

let tableData = reactive([]);
const DataFlag = ref(false);

onMounted(() => {
  axios.get('http://localhost:9999/getTableData').then(res => {
    tableData = res.data
    DataFlag.value = true;
  })
})
const pushDataValue = (val) => {
  // 修改值后,父组件获取data值
  console.log('val', val);
}
</script>

<style scoped lang="scss"></style>

子组件

<template>
  <el-table max-height="650" :data="tableData">
    <el-table-column :show-overflow-tooltip="true" prop="date" label="日期" sortable width="250">
      <template #default="{ row, column }">
        <div @dblclick="editCell(row, column)">
          <!-- 此处虽然可能频繁改变，但因只能处理一个实例input，只能使用v-if -->
          <span v-if="!row.edit_date">{{ row.date }}</span>
          <el-input ref="enddateinputRefs" @keyup.enter.native="(e) => e.target.blur()" @blur="cellBlur(row, column)"
            v-if="row.edit_date" v-model="row.date"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" sortable width="250">
      <template #default="{ row, column }">
        <div @dblclick="editCell(row, column)">
          <!-- 此处虽然可能频繁改变，但因只能处理一个实例input，只能使用v-if -->
          <span v-if="!row.edit_name">{{ row.name }}</span>
          <el-input ref="valueinputRefs" @keyup.enter.native="(e) => e.target.blur()" @blur="cellBlur(row, column)"
            v-if="row.edit_name" v-model="row.name"></el-input>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, nextTick, getCurrentInstance, defineEmits, reactive } from 'vue';
// 获取当前组件的实例
const { proxy } = getCurrentInstance();
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
})

const enddateinputRefs = ref();
const valueinputRefs = ref();

const emit = defineEmits(['pushDataValue'])
// 左键双击改变单元格为输入框,且该实例获取焦点
const editCell = (row, column) => {
  if (column.property === 'date') {
    row.edit_date = true;
    nextTick(() => {
      // 以下2种方法可以实现,一直只有一个ref实例
      enddateinputRefs.value.focus(); // proxy.$refs.enddateinputRefs.focus()
    })
  } else if (column.property === 'name') {
    row.edit_name = true;
    nextTick(() => {
      // 以下2种方法可以实现,一直只有一个ref实例
      valueinputRefs.value.focus(); // proxy.$refs.valueinputRefs.focus()
    })
  }
}
// 失去焦点，并将table data数据emit给父组件
const cellBlur = (row, column) => {
  if (column.property === 'date') {
    row.edit_date = false;
  } else if (column.property === 'name') {
    row.edit_name = false;
  }
  emit('pushDataValue', props.tableData)
}
</script>

如有不足，欢迎指正。

不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！