前端开发 =》Vue刷怪小妙招
数据字典
效果如下 
添加路由
src/router/index.js
{
path: '/cmn',
component: Layout,
redirect: '/cmn/list',
name: '数据管理',
alwaysShow: true, //显示有层次
meta: { title: '数据管理', icon: 'example' },
children: [
{
path: 'list',
name: '数据字典',
component: () => import('@/views/dict/list'),
meta: { title: '数据字典', icon: 'table' }
}
]
}
定义api
src/api/dict.js
import request from '@/utils/request'
export default{
dictList(id){
return request({
url: `/admin/cmn/dict/findChildData/${id}`,
method: 'get'
})
},
}
调用方法
<script>
import dict from "@/api/dict";
export default {
data() {
return {
list: [],
dialogImportVisible:false //设置弹框是否弹出
};
},
created() {
this.getDictList(1);
},
methods: {
//数据字典列表
getDictList(id) {
dict
.dictList(id)
.then((response) => {
this.list = response.data;
})
.catch((error) => {});
},
//下拉加载数据
getChildrens(tree, treeNode, resolve) {
dict.dictList(tree.id).then((response) => {
resolve(response.data);
});
},
},
};
</script>
页面渲染
<el-table
:data="list"
style="width: 100%"
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>{{ 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 class="el-toolbar">
<div class="el-toolbar-body" style="justify-content: flex-start">
<el-button type="text" @click="exportData"
><i class="fa fa-plus" /> 导出</el-button
>
<el-button type="text" @click="importData"
><i class="fa fa-plus" /> 导入</el-button
>
</div>
</div>
组件接口
//导出数据
exportData() {
window.location.href = "http://localhost:8202/admin/cmn/dict/exportData";
},
导入
弹框 效果图 
组件
<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
<el-form label-position="right" label-width="170px">
<el-form-item label="文件">
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
:action="'http://localhost:8202/admin/cmn/dict/importData'"
class="upload-demo"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传xls文件，且不超过500kb
</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogImportVisible = false"> 取消 </el-button>
</div>
</el-dialog>
组件接口
//数据导入
importData() {
this.dialogImportVisible = true; //设置弹框是否弹出
},
//上传成功调用的方法
onUploadSuccess(){
this.dialogImportVisible = false; //设置弹框是否弹出
this.getDictList(1);
},
到这里导入导出基本已经完善好了，包括列表的编辑、删除以及添加操作，模糊查询
评论