vue+element 实现树结构

话不多说直接先上图

 <el-tree
              style="overflow:auto;text-align: left;"
              :data="Allxzlist"
              :props="props1"
              :show-checkbox="true"
              @check-change="handleCheckChange"
              ref="treecheck"
              node-key="ID"
              :highlight-current="true"
              :default-expanded-keys="defaultexpandedkeys"
              :default-checked-keys="defaultcheckedkeys"
              :check-strictly="false"
            ></el-tree>

Allxzlist: [],
      props1: {
        value: "ID",
        label: "XZQHMC",
        children: "CHILDREN"
      },
      defaultcheckedkeys: [],
      defaultexpandedkeys: [],

Allxzlist: [],  这个是获取的全部的值

props1: {

value: "ID",

label: "XZQHMC",

children: "CHILDREN"

},//这个是我们要展示的模板

defaultcheckedkeys: [],//这个是获取详情或者想要设置的默认值

defaultexpandedkeys: [],//这个是获取详情或者想要设置的默认值

handleCheckChange(data, checked, indeterminate) {
      if (this.$refs.treecheck.getCheckedKeys(true, false)) {
        this.sjlxform.slsj.SJFW = this.$refs.treecheck
          .getCheckedKeys(true, false)
          .join(",");
      } else {
        this.sjlxform.slsj.SJFW = null;
      }
      console.log(this.sjlxform, " this.sjlxform");
    },