element-ui实现tableTree：前后端

需实现的效果：

前端代码：

<template>
  <div class="app-container">
	<el-table
    :data="tableData"
    :load="getChildrens"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    style="width: 100%"
    row-key="id"
    border
    lazy
    >
    
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="dictCode"
      label="编码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="value"
      label="值">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间">
    </el-table-column>
  </el-table>
   </div>
</template>

<script>
import {dictList} from '@/api/cmn'
export default {
    data(){
        return {
            tableData:[]
        }
    },
    created() {
        this.getDictList(1)
    },
    methods:{
        getDictList(id) {
            dictList(id).then(res => {
                this.tableData = res.data.data
            })
        },
        //查询下级内容  --- 不管用的话修改package.json中的element-ui的版本
        getChildrens(tree, treeNode, resolve){
            dictList(tree.id).then(res => {
                //console.log(res)
                resolve(res.data.data)
            })   
        }
    }
}
</script>
           

后端代码：

controller：

//根据数据id查询子数据列表
    @ApiOperation(value = "根据数据id查询子数据列表")
    @GetMapping("findChildData/{id}")
    public R findChildData(@PathVariable Long id) {
        List<Dict> list = cmnService.findChlidData(id);
        return R.ok().data(list);
    }
           

service：

//查询id下的子节点数据
    @Override                              //keyGenerator在RedisConfig中有配置
    @Cacheable(value = "dict",keyGenerator = "keyGenerator")
    public List<Dict> findChlidData(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(wrapper);
        //想集合中每个对象赋值hasChildren
        for (Dict dict : dictList) {
            Long dictId = dict.getId();
            boolean isChild = isChild(dictId);
            dict.setHasChildren(isChild);
        }
        return dictList;
    }
    
		//查询id下有无子节点，有的话将hasChild填充为true
    private boolean isChild(Long id) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        Integer count = baseMapper.selectCount(queryWrapper);
        return count > 0;
    }