标签：控件 return title elementUI Tree edu data subject

elementUI-Tree 树形控件的使用

实现效果：

控件的官方使用说明

控件要求返回的数据结构

{
  "success": true,
  "code": 20000,
  "message": "成功",
  "data": {
    "items": [
      {
        "id": "1394579386803421185",
        "title": "后端开发",
        "children": [
          {
            "id": "1394579386803421186",
            "title": "Java"
          },
          {
            "id": "1394579386870530049",
            "title": "Python"
          }
        ]
     }
    ]
  }
}

控件功能的实现

1、创建API

创建api/edu/subject.js

import request from '@/utils/request'
const api_name = '/admin/edu/subject'

export default{

    getNestedTreeList(){
        return request({
            url: `${api_name}/list`,
            method: 'get',
        })
    }

}

2、创建list组件

创建views\edu\subject\list.vue

<template>
    <div class="app-container">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>

        <!-- :filter-node-method="filterNode"
            表示调用filterNode过滤方法
         -->
        <el-tree
            class="filter-tree"
            :data="subjectList"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
        </el-tree>
    </div>
</template>
<script>
import subject from '@/api/edu/subject'
export default {
    data () {
        return {
            filterText: '', //过滤文本
            subjectList: [], //课程列表
            defaultProps: {
                children: 'children',//指定孩子节点的标签
                label: 'title'//指定孩子节点的数据变量名
            }
        }
    },

    // 实时监听
    watch: {
        //filterText(new, old)
      filterText(val) {
          //下面这段代码表示传递val给filter-node-method调用的方法
        this.$refs.tree.filter(val);
      }
    },

    created () {
        this.fetchNodeList()
    },

    methods: {

        // 获取远程数据
        fetchNodeList(){
            subject.getNestedTreeList().then(response => {
                // console.log(response)
                if(response.success == true){
                    this.subjectList = response.data.items
                }
            })
        },

        //节点过滤方法
        //value是关键字
        //data是每一条数据的值
        filterNode(value, data) {
            if (!value) return true;
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;//对每一条进行比对
        }
    }
}
</script>

总结

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

标签：控件,return,title,elementUI,Tree,edu,data,subject
来源： https://blog.csdn.net/m0_46991388/article/details/117280192

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。