vue实现数据字典列表功能⼀后端代码
1 接⼝
public interface DictService extends IService<Dict> {
// 根据数据id查询⼦数据列表vue element admin
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对象中设置hasChildren
for (Dict dict : dictList) {
Long dictId = Id();
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 {
@Autowired
private 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 {
@Autowired
private 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"
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>{{ w.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>{{ w.value }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">
<span>{{ ateTime }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import dict from "@/api/dict";
export default {
data() {
return {
list: [] //数据字典列表数组
};
},
created() {
},
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 暂时先修改下端⼝后
NODE_ENV: '"development"',
// BASE_API: '"localhost:8201"',  // 医院、商业公司和药房的接⼝
BASE_API: '"localhost:8202"', // 数据字典
// BASE_API: '"easy-mock/mock/5950a2419adc231f356a6636/vue-admin"', })
三测试页⾯效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。