十分钟搞定vue

十分钟搞定vue"/>

十分钟搞定vue

看懂这篇文章就可以把vue-element-admin增删改查掌握

1. 先看具体代码，有详细注释

<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_namereturn acc
}, {})export default {name: 'DictDetailTable',components: { Pagination },  // 分页filters: {   statusFilter(type) {    // 类似mapreturn statusTypeKeyValue[type]}},data() {const tId = this.$route.query.dictIdreturn {tableKey: 0,list: null,   // table listtotal: 0,		// 总数listLoading: true, // 懒加载listQuery: {   //查询条件detailValue: undefined,dictId: tId},pageInfo: {   //分页对象page: 1,limit: 10},statusOptions, //状态temp: {  //新增/修改tempid: 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 = truedictDetailList(this.listQuery, this.pageInfo).then(response => {this.list = response.data.recordsthis.total = response.data.total// Just to simulate the time of the requestsetTimeout(() => {this.listLoading = false}, 1 * 1000)})},handleFilter() { // 查询过滤this.pageInfo.page = 1this.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 = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})},createData() {   // 执行后端 新增方法this.$refs['dataForm'].validate((valid) => {if (valid) {createDictDetail(this.temp).then((res) => {if(res.code==200){this.dialogFormVisible = falsethis.getList()this.$notify({ title: '新增', message: '新增成功!', type: 'success', duration: 2000 })}})}})},handleUpdate(row) {  // 点击修改操作this.temp = Object.assign({}, row) // copy objthis.dialogStatus = 'update'this.dialogFormVisible = truethis.$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 = falsethis.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>

2. 调用后端api-js

import request from '@/utils/request'// 查询列表export function dictDetailList(data, pageInfo) {const pageUrl = '/api/temp/page/' + pageInfo.page + '/' + pageInfo.limitreturn 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'})}