优化部门管理页面展示

src/views/user/department.vue

@@ -26,6 +26,8 @@
       highlight-current-row
       @row-click="onRowClick"
       @selection-change="handleSelectionChange"
+      @select="rowSelect"
+      @select-all="selectAll"
     >
       <el-table-column type="selection" width="40" />
       <el-table-column type="index" align="center" label="序号" width="80" />
@@ -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)
     }
   }
 }