分类管理-分类列表

添加 ​

​el-tree​

​​ 组件到 ​

​list.vue​

​ 当中，当然你可以直接复制我下方的整体代码

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>

    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      filterText: '',
      data2: [{
        id: 1,
        label: 'Level one 1',
        children: [{
          id: 4,
          label: 'Level two 1-1',
          children: [{
            id: 9,
            label: 'Level three 1-1-1'
          }, {
            id: 10,
            label: 'Level three 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: 'Level one 2',
        children: [{
          id: 5,
          label: 'Level two 2-1'
        }, {
          id: 6,
          label: 'Level two 2-2'
        }]
      }, {
        id: 3,
        label: 'Level one 3',
        children: [{
          id: 7,
          label: 'Level two 3-1'
        }, {
          id: 8,
          label: 'Level two 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>      

现在去编写后端接口，封装好对应的模型数据返回，渲染即可，在服务器端建立模型

/**
 * @author BNTang
 * @version S2.3.2Dev
 * @program video_parent
 * @date Created in 2021/4/4 11:53
 * @description 分类管理列表树形数据类模型
 **/
@Data
public class LevelCategory {
    private String id;
    private String title;
    private List<LevelCategory> children = new ArrayList<>();
}      

创建 Controller 处理请求及业务，Controller 层的内容如下

/**
 * <p>
 * 获取分类列表树形结构
 * </p>
 */
@GetMapping("/getTreeCategory")
public ResponseResult getTreeCategory() {
    return ResponseResult.ok().data("list", categoryService.getTreeCategory());
}      

在实现类当中创建上图中报错的那个方法如下，首先在接口当中添加方法修改 ​

​CategoryService.java​

​

/**
 * <p>
 * 获取分类列表树形结构
 * </p>
 *
 * @return 树形结构分类Data
 */
List<LevelCategory> getTreeCategory();      

紧接着就是编写实现类

@Override
public List<LevelCategory> getTreeCategory() {
    // 1.读取1级分类
    QueryWrapper<Category> oneQueryWrapper = new QueryWrapper<>();
    oneQueryWrapper.eq("parent_id", 0);
    List<Category> oneCategories = baseMapper.selectList(oneQueryWrapper);

    // 2.读取2级分类
    QueryWrapper<Category> twoQueryWrapper = new QueryWrapper<>();
    twoQueryWrapper.ne("parent_id", 0);
    List<Category> twoCategories = baseMapper.selectList(twoQueryWrapper);

    // 封装模型数据
    List<LevelCategory> resultData = new ArrayList<>();

    oneCategories.forEach(oneCategory -> {

        // 把Category转成LevelCategory
        LevelCategory oneLevelCategory = new LevelCategory();

        // 属性的复制
        // 把前一个对象当中的属性值复制到后一个对象当中相同的属性中去
        // 如果前一个对象在后一个对象当中没有找到相同的属性,就不复制
        BeanUtils.copyProperties(oneCategory, oneLevelCategory);

        // 获取当前子分类有哪些
        // 遍历所有的二级分类
        twoCategories.forEach(twoCategory -> {
            // 二级分类的parent_id=一级分类的id,就是当前一级分类,的子级
            if (twoCategory.getParentId().equals(oneCategory.getId())) {
                LevelCategory twoLevelCategory = new LevelCategory();

                BeanUtils.copyProperties(twoCategory, twoLevelCategory);

                oneLevelCategory.getChildren().add(twoLevelCategory);
            }
        });

        resultData.add(oneLevelCategory);
    });

    return resultData;
}