效果

前端

<template><div class="app-container"><el-inputplaceholder="輸入關鍵字進行過濾"、<! -- 雙向綁定-- >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: { // 監聽器filterText(val) {// 對樹節點進行篩選操作 接收一個任意類型的參數，該參數會在 filter-node-method 中作為第一個參數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)// 過濾出節點return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;//console.log(value)}} } </script><style></style>

在組件創建時，我們向后端發起請求獲取樹形列表的數據，然后設置綁定的結構, 并且將列表綁定到tree

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

后端

// controller @ApiOperation("嵌套數據列表")@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 接口的實現

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。