我是靠谱客的博主 魁梧猎豹，最近开发中收集的这篇文章主要介绍Vue使用ElementUI组件与后台API接口实现表格的增删改查1、后端接口文档：2、前端获取API接口：3、前端页面：，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
需求：
（1）使用同一个dialog实现增加，查看，编辑
（2）全局删除和单个删除
（3）分页组件
1、后端接口文档：
增加： POST /add
删除：GET /delete
导入：POST /import [http:-.....]
分页：POST /page
修改：POST /update
2、前端获取API接口：
在api文件夹里处理接口：
import request from '@/router/axios'
import store from "@/store";
//数据管理增加
export function eventAdd(obj) {
return request({
url: '/api/add',
method: 'post',
data: obj
})
}
//数据删除,多选删除id逗号分隔
export function eventDel(obj) {
return request({
url: '/api/delete',
method: 'get',
params: obj
})
}
//导入
export function eventImport(obj) {
return request({
url: '/api/import',
method: 'post',
data: obj
})
}
//数据分页
export function eventPage(obj) {
return request({
url: '/api/page',
method: 'post',
data: obj
})
}
//数据修改
export function eventUpdate(obj) {
return request({
url: '/api/update',
method: 'post',
data: obj
})
}3、前端页面：
注意：列表数据在分页里；建议先做添加功能（自己写个假数据），添加、查看、修改页面为Dialog对话框
<!--
数据页面
-->
<template>
<div class="eventDate">
<div class="eventDate-ground">
<!-- 头部区域 -->
<el-form size="small" :inline="true">
<el-form-item>
<el-input v-model="dataForm.hphm"
placeholder="请输入号搜索"
class="black_input" clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
icon="el-icon-search" class="blue_btn"
@click="getList">
搜索
</el-button>
</el-form-item>
<el-form-item style="float: right">
<div class="devicebox">
<el-button class="deviceBtn black_btn"
@click="showdrawer = true">
<div class="mark"></div>
条件过滤
</el-button>
</div>
<el-button type="primary" icon="el-icon-edit"
@click="addItem()">添加
</el-button>
<el-button type="primary" icon="el-icon-delete"
@click="deleteBtn(dataForm)">删除
</el-button>
<el-button type="primary" icon=""
@click="importFile()"
v-if="curFileList.length">确认导入
</el-button>
<el-upload style="display: inline-block; margin-left: 10px"
v-if="!curFileList.length" class="upload-demo"
ref="upload" action="#" accept=".xls,.xlsx"
:on-remove="handleRemove" :file-list="curFileList"
:auto-upload="false" :show-file-list="false"
:on-change="handleChange">
<el-button type="primary" icon="">导入模板</el-button>
</el-upload>
<a href="" style="color: #fff; margin-left: 10px; font-size: 12px">
下载模板</a>
</el-form-item>
</el-form>
<!-- 列表内容区域 -->
<el-table :data="noticeList" size="small" ref="multipleTable"
@selection-change="handleSelectionChange"
:row-key="getRowKey" stripe style="width: 100%">
<el-table-column type="selection" :reserve-selection="true"
align="center" width="55"></el-table-column>
<el-table-column prop="hphm" align="center" :show-overflow-tooltip="true"
label="号码"></el-table-column>
<el-table-column prop="cllx" align="center" :show-overflow-tooltip="true"
label="类型"></el-table-column>
<el-table-column prop="sgsj" align="center" :show-overflow-tooltip="true"
label="时间"></el-table-column>
<el-table-column prop="ddmc" align="center" :show-overflow-tooltip="true"
label="路段"></el-table-column>
<el-table-column prop="sglx" align="center" :show-overflow-tooltip="true"
label="类型"></el-table-column>
<el-table-column fixed="right" header-align="center" width="240"
align="center" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" icon=""
class="showImgClass black_table_btn"
@click="msgItem(scope.row, '3')">查看
</el-button>
<el-button type="text" size="small" icon="el-icon-edit"
class="showImgClass black_table_btn"
@click="msgItem(scope.row, '2')">修改
</el-button>
<el-button type="text" size="small" icon="el-icon-delete"
class="showImgClass black_table_btn"
@click="deleteItem(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页插件 -->
<div style="text-align: center; margin-top: 20px">
<el-pagination v-if="dataForm.pageAble" background
:current-page="dataForm.current"
:page-size="dataForm.size"
:total="total"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:page-sizes="[8, 10, 20, 50]"
:pager-count="5"
layout="prev, pager, next, jumper,sizes, total"
>
</el-pagination>
</div>
<!--条件筛选抽屉-->
<el-drawer custom-class="drawer-seach"
:visible.sync="showdrawer"
direction="rtl"
size="27%"
title="条件筛选">
<div class="demo-drawer_content">
<el-form size="small" :model="dataForm" ref="searchForm"
@keyup.enter.native="getList()"
class="eventDataForm">
<el-form-item label="时间">
<el-date-picker v-model="dataForm.sgsj"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss" clearable
type="datetime">
</el-date-picker>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="dataForm.cllx"
multiple clearable placeholder="类型">
<el-option v-for="(item, index) in cllxList"
:key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路段">
<el-select v-model="dataForm.sgld"
multiple clearable placeholder="路段">
<el-option v-for="(item, index) in ddmcList"
:key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="dataForm.sglx" :reserve-keyword="true"
multiple filterable clearable placeholder="类型">
<el-option v-for="(item, index) in sglxList"
:key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="drawer-footer" style="text-align: center">
<el-button @click="showdrawer = false">取消</el-button>
<el-button type="primary" @click="getList">搜索</el-button>
</div>
</div>
</el-drawer>
<!-- 对话框 -->
<el-dialog :title="currentType == '1' ? '添加页面' : currentType == '2' ? '修改页面' : '查看页面'"
content :close-on-click-modal="false"
:visible.sync="showAdd" width="460px">
<el-form :model="ruleForm" ref="refForm"
class="addForm" :rules="rules" label-width="90px">
<el-form-item label="号码" prop="hphm">
<el-input v-model="ruleForm.hphm" type="text"></el-input>
</el-form-item>
<el-form-item label="类型" prop="cllx">
<el-select v-model="ruleForm.cllx" multiple clearable
placeholder="类型" style="width: 268px">
<el-option v-for="(item, index) in cllxList" :key="index"
:label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="路段" prop="ddmc">
<el-select v-model="ruleForm.ddmc" multiple clearable
placeholder="路段" style="width: 268px">
<el-option v-for="(item, index) in ddmcList" :key="index"
:label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="sglx">
<el-select v-model="ruleForm.sglx" multiple clearable
placeholder="类型" style="width: 268px">
<el-option v-for="(item, index) in sglxList" :key="index"
:label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" prop="sgsj">
<el-date-picker v-model="ruleForm.sgsj" format="yyyy-MM-dd
HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable
type="datetime">
</el-date-picker>
</el-form-item>
</el-form>
<div style="text-align: center">
<el-button @click="showAdd = false">取消</el-button>
<el-button type="primary" @click="add"
v-if="currentType != '3'">确认
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { geteqType } from '@/api/common';
import { eventAdd, eventDel, eventImport, eventPage, eventUpdate } from '@/api/screen/eventData'; //获取列表数据api
export default {
components: {},
data() {
return {
showdrawer: false, //抽屉是否展示
dataForm: {
cllx: [],
current: 0,
hphm: '',
pageAble: true,
ddmc: [],
sgld: [],
sglx: [],
sgsj: '',
size: 10,
},
total: 0,
noticeList: [], //存储列表数据
tableCheckList: [],
cllxList: [],
ddmcList: [],
sglxList: [],
curFileList: [],
showAdd: false,
currentType: '1',
ruleForm: {},
eventDel: [],
rules: {
hphm: [{ required: true, message: '请输入号码', trigger: 'blur' }],
cllx: [{ required: true, message: '请选择类型', trigger: 'change' }],
sglx: [{ required: true, message: '请选择类型', trigger: 'change' }],
ddmc: [{ required: true, message: '请选择地点', trigger: 'change' }],
sgsj: [{ required: true, message: '请选择时间', trigger: 'change' }],
},
};
},
created() {
this.getDictList();
this.getDataList();
},
methods: {
/* 获取多选选项 */
getDictList() {
geteqType('vehicle_type').then((res) => {
this.cllxList = res.data.data;
});
geteqType('ld__code_type').then((res) => {
this.ddmcList = res.data.data;
});
geteqType('ld__code_type').then((res) => {
this.sglxList = res.data.data;
});
},
getDataList() {
//获取列表数据
let params = { ...this.dataForm };
eventPage(params).then((res) => {
if (res.data.data.records) {
if (res.data.data.records.length != 0) {
this.noticeList = res.data.data.records;
this.total = res.data.data.total;
} else {
this.noticeList = [];
}
}
});
},
addItem() {
//添加按钮
this.currentType = '1';
this.showAdd = true;
this.ruleForm = {};
// let self = this
// this.$nextTick(function () { //因为input框无法输入被注释了
// self.$refs.refForm.resetFields()
// })
},
msgItem(item, type) {
//编辑和详情按钮
this.currentType = type;
this.showAdd = true;
this.ruleForm = { ...item };
},
//单个删除
deleteItem(item) {
const self = this;
this.$confirm('确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(function () {
eventDel({ id: item.id }).then((res) => {
if (res.data.code == 0) {
self.$message.success('删除成功');
}
self.getDataList();
});
});
},
//全局删除
deleteBtn(row) {
const self = this;
for (let i = 0; i < this.tableCheckList.length; i++) {
let j = i;
let id = this.tableCheckList[j].id;
this.eventDel.push(id);
}
if (this.eventDel.length !== 0) {
this.$confirm('确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(function () {
eventDel({ id: self.eventDel.join() }).then((res) => {
if (res.data.code == 0) {
self.$message.success('删除成功');
}
self.getDataList();
});
});
} else {
this.$message.error('请选择要删除的数据');
}
},
add() {//对话框确定按钮
const self = this;
this.$refs.refForm.validate((valid) => {
if (valid) {
let url = eventAdd;//添加
if (this.currentType == '2') url = eventUpdate;//编辑
url({
id: this.ruleForm.id,
hphm: this.ruleForm.hphm,
cllx: this.ruleForm.cllx.join(),
sglx: this.ruleForm.sglx.join(),
ddmc: this.ruleForm.ddmc.join(),
sgsj: this.ruleForm.sgsj,
}).then((res) => {
self.showAdd = false;
if (res.code == 0) {
self.$message.success('更新成功');
}
self.getDataList();//重新获取列表
});
}
});
},
getRowKey(row) {
return row.id;
},
/* 导入数据功能 */
importFile() {
const self = this;
if (this.curFileList.length == 0) {
this.$notify({
title: '提示',
message: '请上传Excel文件',
type: 'warning',
duration: 2000,
});
return;
}
let formData = new FormData();
formData.append('file', this.curFileList[0].raw);
eventImport(formData).then((res) => {
self.$notify({
title: '成功',
message: '导入成功',
type: 'success',
duration: 2000,
});
self.curFileList = [];
self.getDataList();
});
},
handleChange(file, fileList) {
this.curFileList = [];
this.curFileList.push(file);
},
handleRemove(file) {
this.curFileList = [];
},
/* 搜索功能 */
getList(val) {
this.dataForm.pageNum = 1;
this.getDataList();
this.showdrawer = false;
},
/* 分页功能 */
sizeChangeHandle: function (val) {
this.dataForm.size = val;
this.dataForm.current = 1;
this.getDataList();
},
currentChangeHandle(val) {
this.dataForm.current = val;
this.getDataList();
},
handleSelectionChange(val) {
this.tableCheckList = val;
},
},
};
</script>
由于前面存在一些问题，改为：
<script>
import { geteqType } from "@/api/common";
import { eventAdd, eventDel, eventImport, eventPage, eventUpdate } from '@/api/screen/eventData';//获取列表数据api
export default {
components: {},
data() {
return {
showdrawer: false,//抽屉是否展示
dataForm: {
cllx: [],
current: 0,
hphm: "",
pageAble: true,
sgld: [],
sglx: [],
sgsj: "",
size: 10
},
total: 0,
noticeList: [],//存储列表数据
tableCheckList: [],
cllxList: [],
ddmcList: [],
sglxList: [],
curFileList: [],
showAdd: false,
currentType: '1',
ruleForm: {
hphm: '',
cllx: [],
ddmc: [],
sglx: [],
sgsj: ''
},
resetList: ['cllx','ddmc','sglx'],
rules:{
hphm: [{required: true,message:'请输入号码',trigger: 'blur'}],
cllx: [{type: 'array',required: true,message:'请选择类型1',trigger: 'change'}],
sglx: [{type: 'array',required: true, message:'请选择类型2',trigger:'change'}],
ddmc: [{type: 'array',required: true,message:'请选择地点',trigger: 'change'}],
sgsj: [{required: true,message:'请选择时间',trigger: 'change'}]
}
}
},
created() {
this.getDictList();
this.getDataList();
},
methods: {
findLabel(row,type) {
let str = '';
row.split(',').map(item =>{
this[`${type}List`].map(tmd =>{
if(item ==tmd.value) {
str+=','+ tmd.label;
}
})
})
return str.substr(1,str.length);
},
/* 获取多选选项 */
getDictList() {
geteqType('vehicle_type').then(res => {
this.cllxList = res.data.data;
})
geteqType('ld_code_type').then(res => {
this.ddmcList = res.data.data;
})
geteqType('sg_code_type').then(res => {
this.sglxList = res.data.data;
})
},
getDataList() {//获取列表数据
let params = { ...this.dataForm }
eventPage(params).then((res) => {
if (res.data.data.records) {
if (res.data.data.records.length != 0) {
this.noticeList = res.data.data.records
this.total = res.data.data.total
} else {
this.noticeList = []
this.total =0
}
}
})
},
resetForm() {
this.showAdd = false;
this.$refs.refForm.resetFields()
},
addItem() {//添加按钮
this.currentType = '1'
this.showAdd = true;
},
msgItem(item, type) {
this.currentType = type
this.showAdd = true
this.ruleForm = { ...item }
this.resetList.map(tmd =>{
this.ruleForm[tmd] = this.ruleForm[tmd].split(',')
})
},
deleteItem(item) {
const self = this;
this.$confirm('确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
eventDel({ id: item.id }).then(res => {
if (res.data.code == 0) {
self.$message.success("删除成功")
}
self.getDataList();
})
})
},
deleteBtn(row) {
const self = this;
if(!this.tableCheckList.length) {
this.$message.warning("请选择要删除的数据")
return
}
let ary = [];
this.tableCheckList.map(item =>{
ary.push(item.id);
})
this.$confirm('确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
eventDel({ id: ary.join() }).then(res => {
if (res.data.code == 0) {
self.$message.success("删除成功")
}
self.getDataList();
})
})
},
add() {
this.$refs.refForm.validate((valid) => {
if (valid) {
let url = eventAdd
if (this.currentType == '2') url = eventUpdate
let param = {
...this.ruleForm
}
Object.keys(param).map(item =>{
if(Array.prototype.isPrototypeOf(param[item])) {
param[item] = param[item].join(',')
}
})
url(param).then(res => {
if (res.data.code == 0) {
this.resetForm()
this.$message.success("操作成功")
}
this.getDataList();
})
}
})
},
getRowKey(row) {
return row.id
},
/* 导入数据功能 */
importFile() {
const self=this
if (this.curFileList.length == 0) {
this.$notify({
title: '提示',
message: '请上传Excel文件',
type: 'warning',
duration: 2000
})
return
}
let formData = new FormData();
formData.append('file', this.curFileList[0].raw)
eventImport(formData).then(res => {
self.$notify({
title: '成功',
message: '导入成功',
type: 'success',
duration: 2000
})
self.curFileList = []
self.getDataList();
})
},
handleChange(file, fileList) {
this.curFileList = [];
this.curFileList.push(file)
},
handleRemove(file) {
this.curFileList = [];
},
/* 搜索功能 */
getList(val) {
this.dataForm.pageNum = 1;
this.getDataList();
this.showdrawer = false;
},
/* 分页功能 */
sizeChangeHandle: function (val) {
this.dataForm.size = val;
this.dataForm.current = 1;
this.getDataList();
},
currentChangeHandle(val) {
this.dataForm.current = val;
this.getDataList()
},
handleSelectionChange(val) {
this.tableCheckList = val;
},
}
}
</script>最后
以上就是魁梧猎豹为你收集整理的Vue使用ElementUI组件与后台API接口实现表格的增删改查1、后端接口文档：2、前端获取API接口：3、前端页面：的全部内容，希望文章能够帮你解决Vue使用ElementUI组件与后台API接口实现表格的增删改查1、后端接口文档：2、前端获取API接口：3、前端页面：所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复