先看具体代码，有详细注释
先看具体代码，有详细注释
<template>
<div class="app-container">
<!-- 查询条件 -->
<div class="filter-container">
<el-row>
<el-col align="left" :span="8">
<el-button type="primary add_btn height32" icon="el-icon-circle-plus-outline" size="small" @click="handleCreate">
新增
</el-button>
</el-col>
<el-col align="right" :span="16">
<el-input v-model="listQuery.detailValue" placeholder="字典值" style="width: 200px; margin-left: 10px;" size="small" />
<el-button type="primary" class="height32" icon="el-icon-search" style="margin-left: 10px;" size="small" @click="handleFilter">
查询
</el-button>
</el-col>
</el-row>
</div>
<!-- 显示数据列表 -->
<el-table size="small" :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 10px;">
<el-table-column label="序号" type="index" :index="typeIndex" width="50" />
<el-table-column label="字典标签" align="center">
<template slot-scope="{row}">
<span>{
{ row.detailLabel }}</span>
</template>
</el-table-column>
<el-table-column label="字典值" align="center">
<template slot-scope="{row}">
<span class="link-type" style="color: #409EFF;" @click="handleUpdate(row)">{
{ row.detailValue }}</span>
</template>
</el-table-column>
<el-table-column label="排序" align="center">
<template slot-scope="{row}">
<span>{
{ row.detailSort }}</span>
</template>
</el-table-column>
<el-table-column label="状态" class-name="status-col" align="center">
<template slot-scope="{row}">
<span>{
{ row.status | statusFilter }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button type="primary" size="small" @click="handleUpdate(row)" plain>
编辑
</el-button>
<el-button type="danger" size="small" @click="handleDelete(row)" plain>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 页标 -->
<pagination v-show="total>0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" />
<!-- 新增-修改 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="字典标签" prop="dictCode" placeholder="请选择填写字典标签" size="small">
<el-input v-model="temp.detailLabel" />
</el-form-item>
<el-form-item label="字典值" prop="dictName" placeholder="请选择填写字典值" size="small">
<el-input v-model="temp.detailValue" />
</el-form-item>
<el-form-item label="排序" prop="dictSort" placeholder="请选择填写排序" size="small">
<el-input v-model="temp.detailSort" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="temp.status" class="filter-item" placeholder="请选择状态" style="width:100%" size="small">
<el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item label="备注" size="small">
<el-input v-model="temp.remark" :autosize="{ minRows: 4, maxRows: 6}" type="textarea" placeholder="请填写备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="dialogStatus==='create'?createData():updateData()">
保存
</el-button>
<el-button size="small" @click="dialogFormVisible = false">
关闭
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { dictDetailList, createDictDetail, updateDictDetail, deleteDictDetail } from '@/api/dictData/dictDetail' // 引入调用api
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 是否启用 1是2否
const statusOptions = [
{ key: 1, display_name: '启用' },
{ key: 2, display_name: '禁用' }
]
const statusTypeKeyValue = statusOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name
return acc
}, {})
export default {
name: 'DictDetailTable',
components: { Pagination }, // 分页
filters: {
statusFilter(type) { // 类似map
return statusTypeKeyValue[type]
}
},
data() {
const tId = this.$route.query.dictId
return {
tableKey: 0,
list: null, // table list
total: 0, // 总数
listLoading: true, // 懒加载
listQuery: { //查询条件
detailValue: undefined,
dictId: tId
},
pageInfo: { //分页对象
page: 1,
limit: 10
},
statusOptions, //状态
temp: { //新增/修改temp
id: undefined,
dictId: tId,
detailLabel: '',
detailValue: '',
detailSort: undefined,
status: undefined,
remark: '',
pid: undefined
},
dialogFormVisible: false, //新增修改弹出框
dialogStatus: '', //弹出框 显示隐藏控制
textMap: {
update: '修改',
create: '新增'
},
rules: { //新增修改保存时 校验规则
detailLabel: [{ required: true, message: '字典标签不能为空', trigger: 'blur' }],
detailValue: [{ required: true, message: '字典值不能为空', trigger: 'blur' }],
detailSort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}
}
},
created() { //打开界面执行动作
this.getList()
},
methods: {
typeIndex(index) { // 序号
return (index + 1) + (this.pageInfo.page - 1) * this.pageInfo.limit
},
getList() { //查询分页
this.listLoading = true
dictDetailList(this.listQuery, this.pageInfo).then(response => {
this.list = response.data.records
this.total = response.data.total
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1 * 1000)
})
},
handleFilter() { // 查询过滤
this.pageInfo.page = 1
this.getList()
},
resetTemp() { // 重置 表单
this.temp = {
id: undefined,
dictId: this.listQuery.dictId,
detailLabel: '',
detailValue: '',
detailSort: undefined,
status: undefined,
remark: '',
pid: undefined
}
},
handleCreate() { // 点击新增操作
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
createData() { // 执行后端 新增方法
this.$refs['dataForm'].validate((valid) => {
if (valid) {
createDictDetail(this.temp).then((res) => {
if(res.code==200){
this.dialogFormVisible = false
this.getList()
this.$notify({ title: '新增', message: '新增成功!', type: 'success', duration: 2000 })
}
})
}
})
},
handleUpdate(row) { // 点击修改操作
this.temp = Object.assign({}, row) // copy obj
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
updateData() { // 执行后端 修改方法
this.$refs['dataForm'].validate((valid) => {
if (valid) {
const tempData = Object.assign({}, this.temp)
updateDictDetail(tempData).then((res) => {
if(res.code==200){
this.dialogFormVisible = false
this.getList()
this.$notify({ title: '修改', message: '修改成功', type: 'success', duration: 2000 })
}
})
}
})
},
handleDelete(row) { // 执行后端 删除方法
this.$confirm('你确定要删除该信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
await deleteDictDetail(row.id)
this.getList()
this.$message({ type: 'success', message: '删除成功!' })
}).catch(() => {
this.$message({ type: 'success', message: '已取消删除' })
})
}
}
}
</script>
调用后端api-js
import request from '@/utils/request'
// 查询列表
export function dictDetailList(data, pageInfo) {
const pageUrl = '/api/temp/page/' + pageInfo.page + '/' + pageInfo.limit
return request({
url: pageUrl,
method: 'post',
data
})
}
// 新增
export function createDictDetail(data) {
return request({
url: '/api/temp/add',
method: 'post',
data
})
}
// 编辑
export function updateDictDetail(data) {
return request({
url: '/api/temp/upd',
method: 'put',
data
})
}
// 删除
export function deleteDictDetail(id) {
return request({
url: '/api/temp/del/' + id,
method: 'delete'
})
}
————————————————
原文链接：https://blog.csdn.net/qq_16771097/article/details/113342828