vue+element实现删除功能

vue+element实现删除功能

---

---

一、api文件夹中编写api接口

代码如下

export function delBannerList(params) {
	return request({
		url: '/banner/del',
		method: 'post',
		params
	})
}

二、编写删除按钮

代码如下（示例）：

<el-table v-loading="listLoading" :data="bannerData" stripe style="width: 100%">
			<el-table-column prop="id" label="编号" width="130">
			</el-table-column>
			<el-table-column prop="bname" label="轮播图名字" width="180">
			</el-table-column>
			<el-table-column prop="burl" label="轮播图地址" width="180">
			</el-table-column>
			<el-table-column prop="weight" label="权重" width="130">
			</el-table-column>
			<el-table-column prop="" label="操作" fixed="right">
				<el-row slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" @click="updBtn(scope)" circle></el-button>
					<!-- 删除按钮 -->
					<el-button type="danger" icon="el-icon-delete" @click="delBanner(scope.$index, scope.row)" circle>
					</el-button>
				</el-row>
			</el-table-column>
		</el-table>

三、使用api文件夹中的接口

代码如下（示例）：

	delBanner(index, row) {
				this.$confirm("是否确认删除本条数据，删除后不可恢复?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "info"
				}).then(() => {
					delBannerList({
						id: row.id
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								showClose: true, //可关闭的弹窗
								message: '删除成功',
								type: 'success',
								duration: '3000'
							});
							//刷新页面，也可不这样写
							setTimeout(function() {
								window.location.reload();
							}, 1000);
						} else {
							this.$message.error(res.msg);
						}
					})
				})


			}

该处使用的url网络请求的数据。

并且在methods:{}中编写。

---

总结

这几天学习了vue+element脚手架，实现基础的增删改需求。