vue中element的树形控件el-tree

//显示菜单数据树形控件
//data要显示的数据
//show-checkbox是否显示checkbox框数据node-key: node的key对应的菜单数据的编号
//props节点配置{chiLdren(下级节点):‘菜单数据中对应的下级名称',Label(节点显示的名称):'菜单数据中的标题'}defauLt-expand-all是否展开所有的节点
      //<!--:default-expanded-keys 默认展开的选项 id选择-->
     //<!-- :default-checked-keys 默认选择id为5的 -->

 

 <el-tree id="testTree" :data="enterpriselist" show-checkbox node-key="id" ref="treeForm"
          :default-expanded-keys="[4399]" @check-change="handleCheckChange">
          </el-tree>
		//在vue data中可以写你的数据
		enterpriselist: [{
          id: 4399,
          label: '产业片区',
          disabled: true,
          children: []
        }],
        //因为我的数据是接口请求过来的所以我在方法里动态添加的
         this.$axios.get("/apg/industry/industrialAll").then(res => {
              if (res.data.data) {
                _this.arealist = res.data.data
                console.log(_this.arealist);
                // 将一个对象数组数据拿出来变成另一个对象
                _this.arealist.map(((item, index) => {
                  _this.enterpriselist[0].children.push(Object.assign({}, {
                    id: item.industrialAreaId,
                    label: item.industrialAreaName + `(${item.industrialCompanyCount}家)`,
                    children: []
                  }))
                }))
                console.log(_this.enterpriselist[0].children);
              }
            })
		 // 树形结构企业列表点击
      handleCheckChange(data, checked, node) {
          //这里的判断条件可以让复选框变成单选的
        if (checked == true) {
          this.checkedId = data.id;
          this.$refs.treeForm.setCheckedKeys([data.id]);
        }else {
          if (this.checkedId == data.id) {
              this.$refs.treeForm.setCheckedKeys([data.id]);
          }
        }
        //这里你可以判断复选框被选中拿到其id值
         if (checked  == true) {
          console.log(data.id);
          this.initialid = data.id;
         }    
      }
 //css显示最后一级节点上一级的复选框
 // ::v-deep #testTree {
  //   .el-checkbox .el-checkbox__inner {
  //     display: none;
  //   }
  //   div[role="group"] {
  //     .el-checkbox .el-checkbox__inner {
  //       display: inline-block;
  //     }
  //   }
  // }
  // 只显示最后一级节点复选框
  ::v-deep .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }