el-tree的简单使用

陇右浪子

已于 2024-03-25 02:23:36 修改

阅读量209

点赞数 3

文章标签： javascript 前端 vue elementui

于 2024-03-22 10:41:27 首次发布

本文链接：https://blog.csdn.net/weixin_45998693/article/details/136915680

版权

项目场景：

当后端数据只给一条最高级数据单位例如：总部。需要点击展开子项以及子项的子项

主要代码如下：

    <el-tree
      size="mini"
      :data = "treeData"
      :props="props"
      :load="loadNode"
      lazy>
    </el-tree>

export default{
  data(){
    return{
      props: {
          label: 'name',
          children: 'resExt',
          isLeaf: 'leaf',
        },
        treeData:[],
        organId:''
    }
  },
  created(){
    this.this.getGroup()
  },
  methods:{
    getGroup(){
      businessGroup(this.organId).then((res) => {
          if(res.status == "200"){
            this.treeData = res.data
          }
      })
    },
    loadNode(node, resolve){
    //判断下级
      this.organId = node.level ===0?"-1":node.data.id
      businessGroup(this.organId).then((res) => {
          if(res.status == "200"){
            resolve((res.data.map((item)=>{
              return {...item}
            })))
          }
      })
    }
  }
}