效果

前端

<template><div class="app-container"><el-inputplaceholder="輸入關(guān)鍵字進(jìn)行過濾"、<! -- 雙向綁定-- >v-model="filterText"></el-input><el-tree ref="tree":data="subjectList" :props="defaultProps" :filter-node-method="filterNode"></el-tree></div> </template><script> import subjectApi from '@/Api/edu/Subject'export default {data(){return {filterText:"",subjectList:[],// Tree 組件 顯示的值綁定 defaultProps:{children:'children',label:'title'}}}, watch: { // 監(jiān)聽器filterText(val) {// 對(duì)樹節(jié)點(diǎn)進(jìn)行篩選操作 接收一個(gè)任意類型的參數(shù)，該參數(shù)會(huì)在 filter-node-method 中作為第一個(gè)參數(shù)this.$refs.tree.filter(val);}},created(){this.fetchNodeList()},methods:{fetchNodeList(){subjectApi.getNestedTreeList().then(response=>{this.subjectList = response.data.items})},filterNode(value, data) {if (!value) return true;//console.log(data)// 過濾出節(jié)點(diǎn)return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;//console.log(value)}} } </script><style></style>

在組件創(chuàng)建時(shí)，我們向后端發(fā)起請(qǐng)求獲取樹形列表的數(shù)據(jù)，然后設(shè)置綁定的結(jié)構(gòu), 并且將列表綁定到tree

// Tree 組件 顯示的值綁定 defaultProps:{children:'children',label:'title'} <el-tree <! -- 綁定元素 這樣就可以通過this.$refs.tree 訪問到該元素對(duì)象-- >ref="tree"<! -- 數(shù)據(jù)綁定-- >:data="subjectList" <! -- 數(shù)據(jù)結(jié)構(gòu)綁定-- >:props="defaultProps" :filter-node-method="filterNode"></el-tree>

后端

// controller @ApiOperation("嵌套數(shù)據(jù)列表")@GetMapping("nestedlist")public ResultVo nestedList(){List<SubjectVo> subjectVos= subjectService.nestedList();return ResultVo.ok().data("items",subjectVos);}

SubjectVo

import lombok.Data;import java.io.Serializable; import java.util.ArrayList; import java.util.List;/*** Created with IntelliJ IDEA.** @Auther: zlf* @Date: 2021/04/11/21:59* @Description:*/ @Data public class SubjectVo implements Serializable {private static final long serialVersionUID = 1L;private String id;private String title;private String sort;private List<SubjectVo> children = new ArrayList<>(); }

mapper接口

@Repository public interface SubjectMapper extends BaseMapper<Subject> {List<SubjectVo> selectNestedListByParentId(String id);}

mapper 接口的實(shí)現(xiàn)

<resultMap id="nestedSubject" type="com.zlf.edu.entity.vo.SubjectVo"><id property="id" column="id" /><result property="title" column="title" /><result property="sort" column="sort" /><collection property="children"column="id"select="selectNestedListByParentId"ofType="com.zlf.edu.entity.vo.SubjectVo"/></resultMap><select id="selectNestedListByParentId" resultMap="nestedSubject" parameterType="String">select id ,sort,title from edu_subject where parent_id = #{parentid}</select>

總結(jié)

以上是生活随笔為你收集整理的Element Tree型控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。