vue element 实现 div1里有一个全选按钮,div2里有一个循环的el-table,每一个el-table上方有一个作业checkbox按钮,勾选这个按钮,下方的el-table所有行都勾选。如果点击全选按钮,则作业的按钮都勾选,所有的table内的所有数据也勾选。用代码实现
时间: 2024-03-23 16:41:07 浏览: 50
好的,那我来给你具体实现的代码:
```
<template>
<div>
<div>
<el-checkbox v-model="selectedAll" @change="handleSelectedAllChange">全选</el-checkbox>
</div>
<div v-for="(table, index) in tables" :key="index">
<div>
<el-checkbox v-model="table.selectedTask" @change="handleSelectedTaskChange(table)">作业</el-checkbox>
</div>
<el-table :data="table.data" style="width: 100%">
<el-table-column type="selection" v-model="table.selectedRows"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedAll: false,
tables: [
{
selectedTask: false,
data: [
{ name: '张三', age: 18, selectedRows: [] },
{ name: '李四', age: 20, selectedRows: [] },
{ name: '王五', age: 22, selectedRows: [] },
],
},
{
selectedTask: false,
data: [
{ name: '赵六', age: 24, selectedRows: [] },
{ name: '钱七', age: 26, selectedRows: [] },
{ name: '孙八', age: 28, selectedRows: [] },
],
},
],
};
},
methods: {
handleSelectedAllChange(value) {
this.selectedAll = value;
this.tables.forEach((table) => {
table.data.forEach((row) => {
row.selectedRows = value ? [row] : [];
});
});
},
handleSelectedTaskChange(table) {
table.selectedRows = table.selectedTask ? table.data : [];
if (table.selectedTask) {
this.selectedAll = this.tables.every((table) => table.selectedTask);
} else {
this.selectedAll = false;
}
},
},
};
</script>
```
这里我假设每一行的数据都有一个 selectedRows 属性,用来记录该行是否被选中。同时,tables 数组中的每一个对象代表一个 el-table,其中包含了 selectedTask 用来记录该 el-table 上方的作业 checkbox 是否被选中,以及 data 数组用来存储该 el-table 的数据。
在 handleSelectedAllChange 方法中,我遍历了 tables 数组和每个 el-table 中的数据行,将它们的 selectedRows 数组设置为全选或全不选。在 handleSelectedTaskChange 方法中,我将该 el-table 中的所有数据行的 selectedRows 数组设置为全部选中或全部不选中,并且根据所有 el-table 中的 selectedTask 的值来更新 selectedAll 的值。
注意,这里的 selectedAll 和 tables 中的 selectedTask 都需要使用 v-model 进行双向绑定,以便在用户操作后能够及时更新它们的值。
阅读全文