vue使用Treeselect下拉树组件

最新推荐文章于 2024-08-09 07:25:58 发布

好诡异

最新推荐文章于 2024-08-09 07:25:58 发布

阅读量508

点赞数

本文链接：https://blog.csdn.net/lovely960823/article/details/115207332

版权

后台数据格式先处理一下

@ResponseBody
	@RequestMapping("/dev")
	List<SysMenuEntity> list = sysMenuMapper.selectAll();
		List<SysMenuEntity> parents = list.stream().filter(e->e.getPid().equals("0")).collect(Collectors.toList());
		getChilds(parents,list);
	
	private void getChilds(List<SysMenuEntity> parents, List<SysMenuEntity> list) {
		parents.forEach(item->{
			List<SysMenuEntity> collect = list.stream().filter(e->e.getPid().equals(item.getId().toString())).collect(Collectors.toList());
			item.setChilds(collect);
			if(!collect.isEmpty()) {
				getChilds(collect,list);
			}
		});
	}

在这里插入图片描述
安装：npm install --save @riophae/vue-treeselect
官网：https://www.vue-treeselect.cn/#node
页面引用

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

在这里插入图片描述
使用如下

 <el-form-item label="上级部门" prop="parentId">
                <treeselect v-model="addOrUpdateForm.parentId"
                            :multiple="false"
                            :options="categoryTreeData"
                            placeholder="请选择上级分类"
                            :normalizer="normalizer"
                            style="width: 200px"
                            @select="selectDepart"
                          />
            </el-form-item>

//获取数据
getTreeData(){
      getPostTree().then(res=>{
        this.categoryTreeData = res.data;
        this.categoryTreeAddLabel(this.categoryTreeData);
      })
    },
    //处理数据格式
    categoryTreeAddLabel(tree) {
      for (let i in tree) {
        tree[i].id = tree[i].postId;
        tree[i].label = tree[i].postName;
        if (tree[i].children != null) {
          this.categoryTreeAddLabel(tree[i].children);
        }
      }
    },
    //去除子节点为null的属性，防止报错
    normalizer(node){
      //去掉children=null的属性
      if(node.children==null||node.children=='null'){
        delete node.children;
      }
    },
     selectDepart(val){
      console.log('selectDepart', val)
    }

效果如下
在这里插入图片描述