数据权限自定义部门tree可以单独选中

src/views/system/role/index.vue

@@ -168,7 +168,7 @@
           />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model.trim="form.remark" maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
+          <el-input v-model.trim="form.remarks" maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -238,12 +238,11 @@
                 class="tree-border"
                 :data="deptOptions"
                 show-checkbox
-                default-expand-all
                 node-key="id"
                 check-strictly
                 empty-text="加载中，请稍后"
                 :props="defaultProps"
-                @check-change="handleMenuCheckChange"
+                @check-change="handleDeptCheckChange"
               />
 <!--              修改 :check-strictly="!form.deptCheckStrictly" 改为 check-strictly -->
             </el-form-item>
@@ -439,8 +438,26 @@ export default {
         this.deptOptions = response.data
       })
     },
+    // 数据权限的树状菜单
+    handleDeptCheckChange(data, check, subCheck) {// data为选中节点信息，check选中状态
+      if (data.children !== undefined && data.children !== null) { // 是否包含子节点
+        this.checkDeptNode(data.children, check) // 调用checkNode方法
+      }
+    },
+    checkDeptNode(data, check) {
+      // 遍历所有下级节点信息
+      data.forEach(item => {
+        // 通过节点信息设置选中状态
+        this.$refs.dept.setChecked(item, check, false)
+        // 是否包含下级节点，包含下级节点则选中所有下级节点
+        if (item.children !== undefined) {
+          this.checkNode(item.children, check)
+        }
+      })
+    },
     // 树状图节点点击选中事件
-    handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
+    handleMenuCheckChange(data, check, subCheck) {
+      console.info(data.children)// data为选中节点信息，check选中状态
       if (data.children !== undefined && data.children !== null) { // 是否包含子节点
         this.checkNode(data.children, check) // 调用checkNode方法
       }
@@ -568,13 +585,13 @@ export default {
       this.multiple = !selection.length
     },
     // // 树权限（父子联动）
-    // handleCheckedTreeConnect(value, type) {
-    //   if (type === 'menu') {
-    //     this.form.menuCheckStrictly = !!value
-    //   } else if (type === 'dept') {
-    //     this.form.deptCheckStrictly = !!value
-    //   }
-    // },
+    handleCheckedTreeConnect(value, type) {
+      if (type === 'menu') {
+        this.form.menuCheckStrictly = !!value
+      } else if (type === 'dept') {
+        this.form.deptCheckStrictly = !!value
+      }
+    },
     // 树权限（全选/全不选）
     handleCheckedTreeNodeAll(value, type) {
       if (type === 'menu') {