vue3 el-table实现字段可编辑

在Vue 3中，如果你想让el-table（Element Plus的表格组件）的字段可编辑，你可以通过以下方式来实现：

使用@cell-mouse-enter和@cell-mouse-leave事件动态显示编辑图标或控件

你可以在鼠标进入单元格时显示一个编辑图标或输入框，离开时隐藏。

<template><el-table :data="tableData" style="width: 100%" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"><el-table-column prop="date" label="日期" width="180"><template #default="{ row, column, $index }"><div v-if="isEditing($index, column.property)" class="editable"><el-input v-model="row[column.property]" @change="handleEdit($index, column.property, row[column.property])"></el-input></div><span v-else>{{ row[column.property] }}</span></template></el-table-column><!-- 其他列 --></el-table>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const tableData = ref([/* 数据 */]);
const editing = ref({}); // 用于存储正在编辑的单元格信息function handleMouseEnter(row, column, cell, event) {editing.value[column.property] = true; // 标记当前列正在编辑状态（仅为示例，实际应用中可能需要更复杂的逻辑）
}
function handleMouseLeave(row, column, cell, event) {editing.value[column.property] = false; // 取消标记当前列正在编辑状态（仅为示例）
}
function isEditing(index, key) { //}</script>