1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
| <template>
<div class="home">
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
ref="multipleTable"
default-expand-all
@selection-change="handleSelectionChange"
@select-all="selectAll"
@select="rowSelect"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
export default {
name: "Home",
data() {
return {
tableData: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
children: [
{
id: 111,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 112,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
methods: {
setChildren(children, type) {
// 编辑多个子层级
children.map((j) => {
this.toggleSelection(j, type);
if (j.children) {
this.setChildren(j.children, type);
}
});
},
// 选中父节点时，子节点一起选中取消
rowSelect(selection, row) {
const hasSelect = selection.some((el) => {
return row.id === el.id;
});
if (hasSelect) {
if (row.children) {
// 解决子组件没有被勾选到
this.setChildren(row.children, true);
}
} else {
if (row.children) {
this.setChildren(row.children, false);
}
}
},
toggleSelection(row, select) {
if (row) {
this.$nextTick(() => {
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection( row,select);
});
}
},
// 选择全部
selectAll(selection) {
// tabledata第一层只要有在selection里面就是全选
const isSelect = selection.some((el) => {
const tableDataIds = this.tableData.map((j) => j.id);
return tableDataIds.includes(el.id);
});
// tableDate第一层只要有不在selection里面就是全不选
const isCancel = !this.tableData.every((el) => {
const selectIds = selection.map((j) => j.id);
return selectIds.includes(el.id);
});
if (isSelect) {
selection.map((el) => {
if (el.children) {
// 解决子组件没有被勾选到
this.setChildren(el.children, true);
}
});
}
if (isCancel) {
this.tableData.map((el) => {
if (el.children) {
// 解决子组件没有被勾选到
this.setChildren(el.children, false);
}
});
}
},
// 获取选中的数据
handleSelectionChange(val) {
console.log(val);
},
},
};
|
微信
支付宝
