一?后端代碼

1 接口

public interface DictService extends IService<Dict> {// 根據數據id查詢子數據列表List<Dict> findChlidData(Long id); }

2 接口實現

@Service public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {// 根據數據 id 查詢子數據列表@Override// @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);//向list集合每個dict對象中設置hasChildrenfor (Dict dict : dictList) {Long dictId = dict.getId();boolean isChild = this.isChildren(dictId);dict.setHasChildren(isChild);}return dictList;}// 判斷 id 下面是否有子節點private boolean isChildren(Long id) {QueryWrapper<Dict> wrapper = new QueryWrapper<>();wrapper.eq("parent_id", id);Integer count = baseMapper.selectCount(wrapper);return count > 0;} }

3 控制器

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

二?前端代碼

1?添加路由

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

2?添加?api

修改文件?E:\vue-sdgt\src\api\cmn\dict.js

import request from '@/utils/request'export default {dictList(id) { // 數據字典列表return request({url: `/admin/cmn/dict/findChildData/${id}`,method: 'get'})} }

3?頁面文件

<template><div class="app-container"><el-table:data="list"style="width: 100%"row-key="id"borderlazy: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.getDictList(1);},methods: {// 數據字典列表getDictList(id) {dict.dictList(id).then(response => {this.list = response.data;});},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data);});}} }; </script>

4?切換?element-ui?版本

a 將原來?element-ui?文件夾刪除

b?切換到?2.12.0?版本

"dependencies": {"axios": "0.18.0","element-ui": "2.12.0","js-cookie": "2.2.0","normalize.css": "7.0.0","nprogress": "0.2.0","vue": "2.5.17","vue-router": "3.0.1","vuex": "3.0.1"},

5?暫時先修改下端口后

module.exports = merge(prodEnv, {NODE_ENV: '"development"',// BASE_API: '"http://localhost:8201"', // 醫院、商業公司和藥房的接口BASE_API: '"http://localhost:8202"', // 數據字典// BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', })

三?測試頁面效果

?

總結

以上是生活随笔為你收集整理的vue 实现数据字典列表功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。