在 Element UI 的 el-table 组件中，如果你想要为每行每列的每个单元格添加一个修改开关，你需要注意几个关键点：
el-table的列（column）是固定的配置对象，而不是响应式数据，因此直接在列对象上添加属性（如column.isEdit）是不会有任何响应式效果的。- 通常，你会在行数据（
row）上添加额外的属性来标记某个单元格是否处于编辑状态。 - 使用
this.$set方法在 Vue 实例中设置响应式属性是一个好习惯，但在这里，你可能只需要在行数据（row）上设置属性，因为列定义（column）是静态的。
在 Vue.js 中，当你想要为表格的每一行追踪其每个单元格的编辑状态时，你需要在每行数据（即 tableData 数组中的每个对象）上维护一个状态数组。这是因为每个单元格可能都有一个独立的编辑状态，而不是整行共享一个状态。
isEdit: Array(this.columns.length).fill(false) 这行代码做了以下几件事：
- 创建数组：使用
Array(this.columns.length)创建了一个新数组，其长度与列的数量（this.columns.length）相同。 - 填充数组：
.fill(false)方法将这个新数组的所有元素都填充为false。这意味着初始时，表格中所有单元格的编辑状态都被设置为未编辑（false）。 - 为每个行对象添加
isEdit属性：这个新创建的数组被作为isEdit属性添加到tableData数组中的每个对象上。这样，每一行都有一个与之关联的isEdit数组，用于跟踪该行中每个单元格的编辑状态。
为什么这样做很重要？
- 独立性：每个单元格的编辑状态是独立的，互不影响。
- 响应性：由于
isEdit数组是响应式的（因为它是作为 Vue 实例的数据属性的一部分被创建的），所以当它的值改变时，Vue 将会自动更新 DOM 以反映这些变化。 - 扩展性：如果你的表格结构发生变化（例如，添加或删除列），
isEdit数组的长度也会自动调整，因为它是基于列的数量动态创建的。
总的来说，这种设计允许你以一种灵活且响应式的方式管理表格中每个单元格的编辑状态。
下面是一个简化的例子，展示如何在每行每列的单元格中添加一个修改开关：
vue复制代码
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="(column, columnIndex) in columns"
:key="columnIndex"
:prop="column.prop"
:label="column.label"
>
<template slot-scope="scope">
<div v-if="!scope.row.isEdit[columnIndex]">
{{ scope.row[column.prop] }}
<el-button @click="editNumber(columnIndex, scope.row, 'edit')">编辑</el-button>
</div>
<div v-else>
<!-- 这里可以添加输入框或其他编辑组件 -->
<input v-model="scope.row[column.prop]" />
<el-button @click="editNumber(columnIndex, scope.row, 'cancel')">取消</el-button>
<el-button @click="editNumber(columnIndex, scope.row, 'confirm')">确认</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
// ... 其他列定义
],
tableData: [
// 初始化数据时，为每个行数据添加一个 isEdit 数组
{ date: '2023-06-01', name: '张三', isEdit: Array(this.columns.length).fill(false) },
// ... 其他行数据
],
};
},
methods: {
editNumber(columnIndex, row, type) {
switch (type) {
case "edit":
row.isEdit[columnIndex] = true;
this.$set(row.isEdit, columnIndex, true);
break;
case "cancel":
row.isEdit[columnIndex] = false;
break;
case "confirm":
// 在这里你可能需要执行一些保存操作
row.isEdit[columnIndex] = false;
break;
default:
break;
}
},
},
};
</script>
在这个例子中，我们为 tableData 中的每个对象添加了一个 isEdit 数组，该数组的长度与列的数量相同。数组的每个元素都对应一列的编辑状态。当点击“编辑”按钮时，我们设置对应列的 isEdit 为 true，当点击“取消”或“确认”按钮时，我们将其设置为 false。这样，我们就可以控制每行每列的编辑状态了。
