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;
    }