el-tree设置默认选中checkbox且复选框值改变触发事件

最新推荐文章于 2024-08-02 11:39:51 发布

前端大斗师

最新推荐文章于 2024-08-02 11:39:51 发布

阅读量5.1k

点赞数 3

分类专栏： JavaScript element vue 文章标签： javascript el-tree elementui vue vue.js

本文链接：https://blog.csdn.net/Web_chicken/article/details/120513714

版权

JavaScript 同时被 3 个专栏收录

63 篇文章 4 订阅

订阅专栏

vue

28 篇文章 0 订阅

订阅专栏

element

6 篇文章 0 订阅

订阅专栏

<el-tree 
          :data="treeData" 
          show-checkbox 
          default-expand-all 
          node-key="id" 
          ref="tree"
          @check="checkedList"
          highlight-current
          :props="defaultProps"
          :default-checked-keys="treeData"
          :render-content="renderContent">
        </el-tree>

checkedList(){
      this.$nextTick(() =>{
        let res = this.$refs.tree.getCheckedNodes(true)
        let ids = []
        res.forEach(item =>{
          ids.push(item.id)
        })
        this.checkIdList = ids.toString()
        this.initTable()
      });
    },
    //格式化模板
    renderContent(h, { node, data, store }){//每个父节点统计子节点数量方法
      if(data.sonNodeList !=''){
        return (
          <span class="custom-tree-node">
            <span>{node.label+'（'+data.sonNodeList.length+'）'}</span>
          </span>
        );
      }else{
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      }
    },
    async initLeftMenu(){
      let res = await getCatalogue(this.type)
      if(res.code == 0){
        this.treeData = res.data[this.type]
      }
      this.loading = false
      // 初始化复选框选中状态
      this.treeData.forEach((i, n) => {
        i.sonNodeList.forEach((index,node) =>{
          this.$nextTick(() =>{
          var node = this.$refs.tree.getNode(index)
          if (node.isLeaf) {
            this.$refs.tree.setChecked(node, true)
          }
        });
        })
      })
    },