elementUI-Tree 树形控件的使用

实现效果:

在这里插入图片描述

控件的官方使用说明

在这里插入图片描述

控件要求返回数据结构

 data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],

vue 结合 axios 实现控件功能

  1. 引入 el-tree 树形控件
    1.1 html 部分
    default-expand-all:是否默认展开所有节点,如果想要打开页面就展开则向下面代码即可,若不需要展开则可以使用 :default-expand-all="false"
<el-input
    placeholder="输入关键字进行过滤"
    v-model="filterText">
</el-input>
<el-tree
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
    ref="tree">
</el-tree>

1.2 js部分

<script>
    let v = new Vue({
        el: '#app',
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        data: function () {
            return {
                filterText: '',		//过滤文本
                data:'',	//将返回的数据存储,作为控件显示的数据源
                defaultProps: {
                    children: 'children',	//指定孩子节点的标签
                    label: 'name' 	//指定孩子节点的数据变量名,根据返回的数据进行更改
                }
            }
        },
    })

2 springboot 后端进行数据处理
2.1 新建实体类
2.1.1 学院实体类 College

@Data
@TableName("college") //对应数据库中的 college 数据表
public class College {
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    private String name;	//学院名称
    private String code;	//学院代码

    private List<Major> children; //存放查询到的 major 数据
}

2.1.2 专业实体类 Major

@Data
@TableName("major")
public class Major {
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    private String name;	//专业名称
    private String code;	//专业代码
}

2.2 创建 Mapper
2.2.1 创建 CollegesMaper 进行数据查询

@Mapper
public interface CollegeMapper extends BaseMapper<College> {
	//	  查询学院,不加条件即查询所有学院
    //    @One  一对多
    @Select("select * from college")
    @Results({
            @Result(property="children",column="code",one=@One(select="com.example.graduate.mapper.CollegeMapper.getAll"))
    })	//property="children" 与学院实体类中的一致,同时作为子树数据
    List<College> getList();

	//	将查询到的学院的学院代码 code 作为条件查询所属专业
    @Select("Select * from major where code = #{code}")
    List<Major> getAll(int code);
}

2.2.2 创建 Controller 控制类

//    获取学院及专业列表
    @RequestMapping("/get/colleges")
    @ResponseBody
    public Object college(){
        Map<String,Object> result = new HashMap<>();
        List<College> collegesList = supMapper.getList();
        result.put("data",collegesList);
        return result;
    }

3 浏览器发送请求进行数据获取

        created: function () {
            this.getColleges()
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
        //    获取学院及专业
            getColleges(){
                axios.get("/get/colleges").then(res =>{
                    v.data = res.data.data
                })
            }
        }

后端返回数据结构

在这里插入图片描述

总结

elementUI实现了非常实用的功能的封装,但是实用起来在配置参数和方法上有些麻烦,这就需要我们依照着官方文档来发挥了。感谢你的阅读,希望这篇文章能对你有小小的帮助。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐