el-tree checkbox-CSDN博客

本文链接：https://blog.csdn.net/boyit0/article/details/127371257

el-tree组件使用时执行顺序依次为@current-change、@node-expand、@node-click、@check-change时

经debugger实验，先执行current-change、node-expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢

vue结构如下：

<el-tree class="tree"
              ref="tree"
              show-checkbox
              :data="treeData"
              :props="defaultProps"
              node-key="areaId"
              :check-strictly="true"
              :default-expanded-keys="expandedkey"
              :highlight-current="true"
              accordion
              @node-click="handleNodeClick" @check="checkClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span v-if="data.children" class="iconfont"><i class="el-icon-office-building"></i></span>  
                    <span v-else class="iconfont" style="margin-right: 3px"><i class="el-icon-reading"></i></span> 
                    <span style="font-size:16px;">
                      <template v-if="data.children">{{node.label}}({{data.num}})</template>
                      <template v-else>{{node.label}}</template>
                    </span>
                </span>
            </el-tree>

js部分：

treeData:[],
      defaultProps: {
          children: 'children',
          label: 'label',
      },
      expandedkey:[],

      hydNode:null,


    //点击checkbox
    checkClick(data){
      this.hydNode=data;
      let getNode = this.$refs.tree.getCheckedNodes();  
      if (getNode.length > 0) {
        getNode.forEach(item => {
          if (data.areaId == item.areaId) {
            this.$refs.tree.setChecked(item.areaId , true);
            this.$refs.tree.setCurrentNode(item);   
            
          } else {
            this.$refs.tree.setChecked(item.areaId , false);
          }
        })
      }
    },

    //点击节点
    handleNodeClick(data) { 
      this.hydNode=data;
      let getNode = this.$refs.tree.getCurrentNode();
      this.$refs.tree.setChecked(getNode.areaId , true);  

      let getNodec = this.$refs.tree.getCheckedNodes(); 
      if (getNodec.length!= 0) {
        getNodec.forEach(item => {
          if (data.areaId == item.areaId) {
            this.$refs.tree.setChecked(getNode.areaId , true);               
          } else {
            this.$refs.tree.setChecked(item.areaId , false);
          }
        })
      }  
    },