在Vue 3中，您可以使用组件和事件处理来实现可编辑的表格单元格。以下是一个简单的例子：
<template>
<table>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">
<div v-if="editIndex === rowIndex && editField === cellIndex">
<input
type="text"
:value="cell"
@input="updateValue($event.target.value, rowIndex, cellIndex)"
@blur="stopEdit(rowIndex, cellIndex)"
/>
</div>
<div v-else @click="startEdit(rowIndex, cellIndex)">
{{ cell }}
</div>
</td>
</tr>
</table>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const rows = ref([
['Row 1 Cell 1', 'Row 1 Cell 2'],
['Row 2 Cell 1', 'Row 2 Cell 2'],
]);
const editIndex = ref(null);
const editField = ref(null);
function startEdit(rowIndex, cellIndex) {
editIndex.value = rowIndex;
editField.value = cellIndex;
}
function stopEdit() {
editIndex.value = null;
editField.value = null;
}
function updateValue(value, rowIndex, cellIndex) {
rows.value[rowIndex][cellIndex] = value;
}
return {
rows,
editIndex,
editField,
startEdit,
stopEdit,
updateValue,
};
},
};
</script>
在这个例子中，我们使用了一个二维数组 rows 来表示表格的行和单元格。editIndex 和 editField 用于跟踪当前正在编辑的单元格。startEdit 方法设置编辑状态，stopEdit 方法停止编辑，updateValue 方法在输入值改变时更新单元格的值。
在模板中，我们有一个 v-for 循环来遍历 rows 数组，并为每个单元格创建一个 div 容器。如果单元格是当前可编辑的，我们会显示一个 input 元素，否则显示单元格的文本内容。单元格被点击时，会触发 startEdit 方法，该方法设置当前单元格为可编辑状态。编辑完成后，输入框会失去焦点，触发 blur 事件，调用 stopEdit 方法结束编辑状态。