表设计

效果图

添加路由

在src/router/index.js中添加路由

{
    path: '/cmn',
    component: Layout,
    redirect: '/cmn/list',
    name: '数据管理',
    meta: { title: '数据管理', icon: 'example' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: '数据字典',
        component: () => import('@/views/dict/list'),
        meta: { title: '数据字典', icon: 'table' }
      }
    ]
  },

定义API

创建文件 src/api/cmn/dict.js

import request from '@/utils/request'

export default {
    // 获取数据字典
    discList(id) {
        return request({
            url: `/admin/cmn/dict/findChildData/${id}`,
            method: 'get',
        })
    },
}

添加list.vue组件显示

模板代码

<template>
  <div class="app-container">
            <el-table
      :data="list"	
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="getChildrens"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
                  <el-table-column label="名称" width="230" align="left">
                    <template slot-scope="scope">
                      <span>{{ scope.row.name }}</span>             </template
        >
                    </el-table-column
      >

                  <el-table-column label="编码" width="220">
                    <template slot-scope="{ row }">
                              {{ row.dictCode }}             </template
        >
                    </el-table-column
      >
                  <el-table-column label="值" width="230" align="left">
                    <template slot-scope="scope">
                      <span>{{ scope.row.value }}</span>             </template
        >
                    </el-table-column
      >
                  <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createTime }}</span>
                      </template
        >
                    </el-table-column
      >
              </el-table
    >
        
  </div>
</template>

方法调用

<script>
import dict from "@/api/dict";

export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getDicList(1);
  },
  methods: {
    // 获取数据字典列表
    getDicList(id) {
      dict
        .discList(id)
        .then((respone) => {
          this.list = respone.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取子字典
    getChildrens(tree, treeNode, resolve){
        dict.discList(tree.id)
        .then(response => {
            resolve(response.data)
        })
    }

  },
};
</script>

需要注意的是，请求到的json数据中必须要有hasChildren这个boolean值true代表这个节点有子节点，否者没有子节点。

后端service中的代码

思路是根据查出parent_id值为id的记录，并且再根据查出来的记录的id值作为parent_id值进行查询是否有记录有记录说明有子节点将属性hasChildren设为true否者设为false，最后封装成一个list响应到前端。

package com.lvren.yygh.cmn.service.impl;

import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.lvren.yygh.cmn.mapper.DictMapper;
import com.lvren.yygh.cmn.service.DictService;
import com.lvren.yygh.model.cmn.Dict;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("dictService")
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    // 根据id查询子数据列表
    @Override
    public List<Dict> findChildData(Long id) {

        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> dicts = baseMapper.selectList(wrapper);

        for (Dict dict : dicts) {
            long cid = dict.getId();
            boolean hasChild = hasChild(cid);
            dict.setHasChildren(hasChild);
        }

        return dicts;
    }

    // 根据id判断是否有子节点
    public boolean hasChild(Long id){
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);

        return count > 0;
    }
}