案例：
要在Vue中创建一个可编辑的表格，你可以使用Vue的双向数据绑定功能。以下是一个简单的示例。首先，确保你已经在项目中引入了Vue。接下来，创建一个HTML文件，并在其中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Editable Table</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>可编辑表格</h1>
<table border="1">
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="index">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">
<input type="text" :value="cell" @input="updateCell(index, cellIndex, $event.target.value)">
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
headers: ['姓名', '年龄', '职业'],
rows: [
['张三', 25, '程序员'],
['李四', 30, '设计师'],
['王五', 28, '产品经理']
]
},
methods: {
updateCell(rowIndex, cellIndex, value) {
this.rows[rowIndex][cellIndex] = value;
}
}
});
</script>
</body>
</html>这个示例中，我们创建了一个包含姓名、年龄和职业的表格。表格中的每个单元格都是一个输入框，允许用户编辑内容。当输入框的值发生变化时，updateCell方法会被调用，更新表格数据。
这个简单的示例展示了如何在Vue中创建一个可编辑的表格。你可以根据需要扩展和修改这个示例，以适应你的项目需求。
标签：cellIndex,vue,入门,表格,示例,创建,编辑,Vue From： https://blog.csdn.net/2301_76478257/article/details/136922057