elementUI-Tree 树形控件的使用

时间：2024-11-18 09:18:59

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'
          }]
        }],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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' 	//指定孩子节点的数据变量名，根据返回的数据进行更改
                }
            }
        },
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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 数据
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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;	//专业代码
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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=""))
    })	//property="children" 与学院实体类中的一致，同时作为子树数据
    List<College> getList();

	//	将查询到的学院的学院代码 code 作为条件查询所属专业
    @Select("Select * from major where code = #{code}")
    List<Major> getAll(int code);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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
                })
            }
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

后端返回数据结构

在这里插入图片描述

总结

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

相关文章