@Api(tags = "數(shù)據(jù)字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin
public class DictController {
    @Autowired
    private DictService dictService;
    @ApiOperation(value = "根據(jù)id查詢子數(shù)據(jù)列表")
    @GetMapping("findChildData/{id}")
    public Result findChildData(@PathVariable Long id) {
        List<Dict> list = dictService.findChildData(id);
        return Result.ok(list);
    }
}

public interface DictService extends IService<Dict> {
    /**
     * 根據(jù)id查詢子數(shù)據(jù)列表
     * @param id
     * @return list
     */
    List<Dict> findChildData(Long id);
}

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
    /**
     * 根據(jù)id查詢子數(shù)據(jù)列表
     * @param id
     * @return list
     */
    @Override
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        List<Dict> dictList = baseMapper.selectList(queryWrapper);
        for (Dict dict : dictList) {
            // 得到每一條記錄的id值
            Long dictId = dict.getId();
            // 調(diào)用hasChildren方法判斷是否包含子節(jié)點
            boolean flag = this.hasChildren(dictId);
            // 為每條記錄設(shè)置hasChildren屬性
            dict.setHasChildren(flag);
        }
        return dictList;
    }
    /**
     * 判斷id下面是否有子結(jié)點
     * @param id
     * @return true:有子結(jié)點,false:無子結(jié)點
     */
    private boolean hasChildren(Long id) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        Integer count = baseMapper.selectCount(queryWrapper);
        return count > 0;
    }
}

public interface DictMapper extends BaseMapper<Dict> {
}

  // 數(shù)據(jù)字典路由
  {
    path: '/cmn',
    component: Layout,
    redirect: '/cmn/list',
    name: '數(shù)據(jù)管理',
    meta: { title: '數(shù)據(jù)管理', icon: 'example' },
    // 如果只有一級會僅顯示子按鈕,添加alwaysShow=true 可以使父按鈕也顯示
    alwaysShow:true,
    children: [
      {
        path: 'list',
        name: '數(shù)據(jù)字典',
        component: () => import('@/views/dict/list'),
        meta: { title: '數(shù)據(jù)字典', icon: 'table' }
      }
    ]
  },

<template>
  <div class="app-container">
    <el-table
      :data="list"
      :load="getChildrens"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%"
      row-key="id"
      border
      lazy>
      <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="創(chuàng)建時間" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>