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，一起学习一起进步！