课程分类列表后端实现

待我称王封你为后i 2021-07-24 23:44 410阅读 0赞

# 一 API #

import request from '@/utils/request'
    
    export default {
      /* 展示树形列表 */
      getNestedTreeList() {
        return request({
          url: '/admin/edu/subject/nested-list',
          method: 'get'
        })
      }
    }

# 二 list.vue #

<template>
      <div class="app-container">
        
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"/>
        
        <el-tree
          ref="tree"
          :data="subjectList"
          :props="defaultProps"
          :filter-node-method="filterNode"
          style="margin-top:10px;" />
      </div>
    </template>
    
    <script>
    import subjectApi from '@/api/subject'
    
    export default {
      data() {
        return {
          filterText: '', // 过滤文本
          subjectList: [], // 数据列表
          defaultProps: {
            children: 'children',
            label: 'title'
          }
        }
      },
      /* 监听 filterText 变化 */
      watch: {
        filterText(val) {
        //   console.log(val)
          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
          }
          return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
        }
      }
    }
    </script>

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/c0283ae759f74c8494a5be6694128e49.png