From 2ae62e42b348ed62e9bfe8c6da4f7d642f114c39 Mon Sep 17 00:00:00 2001
From: zichen1019 <1510748736@qq.com>
Date: Fri, 20 Aug 2021 22:13:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=83=A8=E9=97=A8=E7=AE=A1?=
=?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/user/department.vue | 61 ++++++++++++++++++++++++++++++++++-
1 file changed, 60 insertions(+), 1 deletion(-)
diff --git a/src/views/user/department.vue b/src/views/user/department.vue
index 001abe7..38f4a6f 100644
--- a/src/views/user/department.vue
+++ b/src/views/user/department.vue
@@ -26,6 +26,8 @@
highlight-current-row
@row-click="onRowClick"
@selection-change="handleSelectionChange"
+ @select="rowSelect"
+ @select-all="selectAll"
>
@@ -117,8 +119,10 @@ export default {
method: 'get',
params: this.listQuery
}).then(data => {
+ data.forEach(row => {
+ row.isChecked = false
+ })
this.list = data
- this.totalCount = data.total
})
},
showCreate() {
@@ -227,6 +231,61 @@ export default {
closeDialog() {
this.unAllotUserList = []
this.departmentUserList = []
+ },
+ /**
+ * 注意在获取初始数据时，所有节点（包括子节点）都增加一个isChecked 标志参数
+ *
+ * @param selection
+ * @param row
+ */
+ rowSelect(selection, row) {
+ if (row.children) { // 只对有子节点的行响应
+ if (!row.isChecked) { // 由行数据中的元素isChecked判断当前是否被选中
+ row.children.map((item) => { // 遍历所有子节点
+ this.$refs.list.toggleRowSelection(item, true) // 切换该子节点选中状态
+ /*
+ 方法名 说明 参数
+ 用于多选表格，切换某一行的选中状态， row, selected
+ toggleRowSelection 如果使用了第二个参数，则是设置这一行
+ 选中与否（selected 为 true 则选中）
+ */
+ item.isChecked = true
+ })
+ row.isChecked = true // 当前行isChecked标志元素切换为false
+ } else {
+ row.children.map((item) => {
+ this.$refs.list.toggleRowSelection(item, false)
+ item.isChecked = false
+ })
+ row.isChecked = false
+ }
+ // console.log(this.multipleSelection, row);
+ }
+ },
+ selectAll(selection) {
+ // selection 是选中的数据集合
+ this.$refs.list.data.map((items) => { // 使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
+ if (items.children) {
+ if (!items.isChecked) { // 若遍历出来的行未选中
+ this.$refs.list.toggleRowSelection(items, true) // 行变为选中状态
+ items.isChecked = true // 更新标志参数
+ items.children.map((item) => { // 遍历子节点并改变状态与标志参数
+ this.$refs.list.toggleRowSelection(item, true)
+ item.isChecked = true
+ })
+ } else { // 选中状态同理
+ this.$refs.list.toggleRowSelection(items, false)
+ items.isChecked = false
+ items.children.map((item) => {
+ this.$refs.list.toggleRowSelection(item, false)
+ item.isChecked = false
+ })
+ }
+ } else {
+ items.isChecked = !items.isChecked
+ }
+ })
+ // console.log(this.orgs)
}
}
}