vue使用Treeselect下拉树组件 - Go语言中文社区

vue使用Treeselect下拉树组件


后台数据格式先处理一下

@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);
			}
		});
	}

在这里插入图片描述
页面引用

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)
    }

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

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/lovely960823/article/details/115207332
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-04-11 16:41:50
  • 阅读 ( 571 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢