Vue使用ElementUI组件与后台API接口实现表格的增删改查

SunPeng
174 阅读1分钟

​

1、后端接口文档：

增加： POST /add

删除：GET /delete

导入：POST /import   [http:-.....]

分页：POST /page

修改：POST /update

2、前端获取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、前端页面：

注意：列表数据在分页里；建议先做添加功能（自己写个假数据）

<!-- 
    数据页面
 -->
<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" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :page-sizes="[8, 10, 20, 50]" :page-size="dataForm.size" :total="total" layout="prev, pager, next, jumper,sizes, total" :pager-count="5"> </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="添加页面" :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>


> 本篇文章由一文多发平台[ArtiPub](https://github.com/crawlab-team/artipub)自动发布
avatar
文章
阅读
粉丝