element Tree 树形控件折叠、展开全选、清空

最新推荐文章于 2024-04-29 21:35:15 发布

程序猿海王秃

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量2.1k

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_53561783/article/details/131889362

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
      :props="defaultProps">
    </el-tree>
    <el-checkbox v-model="checked" @change="checkboxClick(checked)">全选/反选</el-checkbox>
    <div class="buttons">
      <el-button @click="allExpanded">折叠/展开</el-button>
      <el-button @click="allChecked">全选</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      checked: false,
      expanded: true,
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }
        , {
        id: 4,
        label: '一级 4',
        children: [{
          id: 11,
          label: '二级 4-1'
        }, {
          id: 12,
          label: '二级 4-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    allExpanded() {
      this.expanded = !this.expanded;
      var treeNodeList = this.$refs.tree.store._getAllNodes();
      for (var i = 0; i < treeNodeList.length; i++) {
        treeNodeList[i].expanded = this.expanded;
      }
    },
    allChecked() {
      let ids = []
      this.data.forEach(item => {
        ids.push(item.id)
      });
      this.$refs.tree.setCheckedKeys(ids);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    checkboxClick(val) {
      let ids = []
      this.data.forEach(item => {
        ids.push(item.id)
      });
      if (val) {
        this.$refs.tree.setCheckedKeys(ids);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    }
  },


};
</script>