vue+element tree树的使用

 html:
<el-tree
          class="tree-border"
          :data="menuOptions"
          show-checkbox
          ref="menu"
          node-key="id"
          empty-text="加载中，请稍后"
          :props="defaultProps"
        ></el-tree>
:check-strictly="true"是否取消父子联动


data() {
    return {
        menuOptions: [], // 菜单列表
        checkedKeys: [], // 节点选中
        defaultProps: {
        children: "children",
        label: "label",
      },
    }
}


methods: {
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },

    在其他方式使用
    this.getMenuAllCheckedKeys().join()

    eg: let data = {
            a: this.getMenuAllCheckedKeys().join()
    }
    回显
    数据格式: [1,2,3,4]
     this.$nextTick(() => {
            console.log(res.checkedKeys,'res.checkedKeys')
            this.$refs.menu.setCheckedKeys(res.checkedKeys);
          });
}

vue element tree组件使用_珍妮玛•黛金的博客-CSDN博客