Просмотр исходного кода

部门多选组件增加全选功能

luoaoxuan 1 год назад
Родитель
Сommit
310ba42c52
1 измененных файлов с 19 добавлено и 1 удалено
  1. 19 1
      src/business/platform/org/position/panel.vue

+ 19 - 1
src/business/platform/org/position/panel.vue

@@ -38,7 +38,12 @@
                     highlight-current
                     check-on-click-node
                     @check-change="handleCheckChange"
-                />
+                >
+                    <span slot-scope="{ node, data }" class="custom-tree-node">
+                        <span>{{ node.label }}</span>
+                        <el-button v-show="data.children && data.children.length>0" style="margin-left:8px" type="text" size="mini" @click.stop="allChecked(node, data)">全选</el-button>
+                    </span>
+                </el-tree>
                 <!-- 单选-->
                 <el-tree
                     v-else
@@ -378,6 +383,19 @@ export default {
                 this.$refs.elTree.store._getAllNodes()[i].expanded = expanded
             }
         },
+        allChecked (node, data) {
+            this.$refs.elTree.setChecked(data, !node.checked)
+            this.checkChildNodes(data, node.checked)
+        },
+        // 递归设置子节点的勾选状态
+        checkChildNodes (nodes, checked) {
+            if (nodes.children && nodes.children.length > 0) {
+                nodes.children.forEach(childNode => {
+                    this.$refs.elTree.setChecked(childNode, checked)
+                    this.checkChildNodes(childNode, checked)
+                })
+            }
+        },
         handleCheckChange (data, checked) {
             if (data.id === 0 || data.id === '0') return
             let val = JSON.parse(JSON.stringify(this.value))