在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>