el-tree用法

<el-Tree

          id="userMtree"

          ref="tree"

          class="user-manage-tree"

          :data="treeData"

          options="{options}"

          show-checkbox

          nodeKey="id"

          default-expand-all

          @check-change="checkChange"//节点选中状态发生变化时的回调

          :expand-on-click-node="false"

          @node-click="handleOrganizationNodeClick"//节点被点击时的回调

        />

数据： 

treeData: [

        {

          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",

            },

          ],

        },

      ]



方法：

 /**、点击树节点触发事件 */

    handleOrganizationNodeClick(obj) {

      this.currentOrganization = obj;

      if (!obj.children) {

        obj.children = [];

      }

      if (obj.children.length === 0 && obj.HasChild) {

        // f发起请求

        let resultRegionInfo = this.asyncTreeData(obj.Id);

        resultRegionInfo.then((data) => {

          obj.children = data.children;

          this.organizationTableData = obj.children;

        });

      }

      this.getDeviceInfoList();

    },



//节点被选中和取消时触发  

checkChange(data, checked) {

      // let userMtree = document.getElementById("userMtree");

      // userMtree.firstElementChild.classList.remove("is-current");

      // this.checkedID = data.id;

      console.log("树形结构=" + JSON.stringify(data) + "******" + checked);

      // this.$emit("emitClickNode", data);

    },

  /**

     * 通过tree来设置勾选，这里只需传入id即可

     */

    setCheckedKeys() {

      this.$refs.tree.setCheckedKeys([6, 9]);

    },





 /**

     * 清空所有选中，清空选中数组数据即可

     */

    resetChecked() {

      this.$refs.tree.setCheckedKeys([]);

    },