element-ui 使用树结构展示菜单-只获取最后一层数据

747 阅读1分钟

需求:通过Tree结构,选择菜单的时候只获取最后一级的数据

实现效果:

image.png

实现数据结构:

image.png

代码:

// HTML
<el-container>
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="idCard"
            ref="tree"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="resourceCheckedKey"
            check-on-click-node
            :props="defaultProps"
            @check-change="handleCheckChange"
          >
          </el-tree>
</el-container>
// JS
data(){
    return{
            treeData: null,
            defaultProps: {
            children: 'children',
            id: 'idCard',
            label: 'name'
         },
      openTree: false,
      getOpenTree: "",
      resourceCheckedKey: []//需要回显的数据
    }
}
 // 编辑回显
    getWindowInfo(ids) {
      let id = ids.id
      windowInfo(id).then(res => {
        this.ruleForm = res.data
        if (res.data.winType == 1 || res.data.winType == '1') {
          this.openTree = true
        } else {
          this.openTree = false
        }
        this.resourceCheckedKey = res.data.consumeUserIdCardList.map((e) => {
          return e;
        });
      });
    },
 // 开始 树结构 逻辑 ------------------------------------
    isOpenTree(val) {
      if (val && val == 1) {
        this.openTree = true
        this.getFindOrganizationAllList()
      } else {
        this.openTree = false
      }
    },
    // 获取数据
    getFindOrganizationAllList() {
      let params = {}
      findOrganizationAllList(params).then(response => {
        this.treeData = response.data
      });
    },
    centerResourceArr() {
      const resourceArr = this.$refs.tree.getCheckedNodes().filter(item => {
        return !item.children
      })
      this.datas = resourceArr.map(vls => { //此处为接口需要数据格式
        if (!vls.children)
          return {
            parentId: vls.id,
            name: vls.name
          }
      })
      return resourceArr //为最后一级节点node(无子节点)
    },
    // 结束 树结构 逻辑---------------------------------------

后台返回数据结构

image.png

至此就完成了element-ui 使用树结构展示菜单-只获取最后一层数据