Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件的方法

<template>
    <div class="table-layout">
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="date" label="日期">
          <template #default="scope">
            <EditableCell
              :cell-data="scope.row.date"
              :is-editing="scope.row.isEditDate"
              :column="scope.column.property"
              :row="scope.row"
              @toggleEdit="toggleEdit"
              @applyChanges="applyChanges"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称">
          <template #default="scope">
            <EditableCell
              :cell-data="scope.row.name"
              :is-editing="scope.row.isEditName"
              :column="scope.column.property"
              :row="scope.row"
              @toggleEdit="toggleEdit"
              @applyChanges="applyChanges"
            />
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述">
          <template #default="scope">
            <EditableCell
              :cell-data="scope.row.description"
              :is-editing="scope.row.isEditDescription"
              :column="scope.column.property"
              :row="scope.row"
              @toggleEdit="toggleEdit"
              @applyChanges="applyChanges"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue';
  import EditableCell from './EditableCell.vue'; // 确保路径正确
  import { ElTable, ElTableColumn, ElInput, ElIcon } from 'element-plus';
  import { Edit } from '@element-plus/icons-vue';
  // 优化后的tableData
  const tableData = ref([
    {
      id: 1,
      date: '2024-08-01',
      name: '项目A',
      description: '这是一个关于项目A的描述',
      isEditDate: false,
      isEditName: false,
      isEditDescription: false
    },
    {
      id: 2,
      date: '2024-08-15',
      name: '项目B',
      description: '这是一个关于项目B的描述',
      isEditDate: false,
      isEditName: false,
      isEditDescription: false
    },
    {
      id: 3,
      date: '2024-09-01',
      name: '项目C',
      description: '这是一个关于项目C的描述',
      isEditDate: false,
      isEditName: false,
      isEditDescription: false
    }
  ]);
  function toggleEdit(column, row) {
    if (column && row) {
      const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;
      row[editKey] = !row[editKey];
    }
  }
  function applyChanges(newValue, column, row) {
    if (column && row) {
      row[column] = newValue;
      const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;
      row[editKey] = false;
    }
  }
  </script>
  <style scoped>
  .table-layout {
    width: 60%;
    margin: 60px auto;
  }
  .edit-icon {
    margin: 10px 0 0 10px;
  }
  </style>

<template>
  <div>
    <span v-if="!isEditing">{{ displayData }}</span>
    <el-input
      v-else
      v-model="displayData"
      style="width: 120px;"
      @blur="onBlur"
    />
    <el-icon color="#409EFF" class="edit-icon" @click="onToggleEdit">
      <Edit />
    </el-icon>
  </div>
</template>
<script>
export default {
  name: 'EditableCell',
 props: ['cellData', 'isEditing', 'column', 'row'], // 添加row属性
  emits: ['toggleEdit', 'applyChanges'],
  data() {
    return {
      displayData: this.cellData
    };
  },
  watch: {
    cellData(newVal) {
      this.displayData = newVal;
    }
  },
  methods: {
    onToggleEdit() {
      this.$emit('toggleEdit', this.column, this.row); // 传递column和row
    },
    onBlur() {
      this.$emit('applyChanges', this.displayData, this.column, this.row); // 传递column和row
    }
  }
}
</script>
<style scoped>
.edit-icon {
  margin: 10px 0 0 10px;
}
</style>