点击删除常用方式
1、根据id删除对应数据
2、根据下标删除对应数据
3、通过接口方式删除数据
vue删除功能
1、删除
2、点击事件方法
点击删除常用方式 1、根据id删除对应数据<!-- 点击传入当前点击的数据 -->
<el-button type="dangerous" @click="handleClickDelProduct(scope.row)">删除</el-button>
//ES6
//根据id查找元素 findIndex
//函数内如果返回true，就结束遍历并返回当前index;
//index如果没有找到返回-1
handleClickDelProduct(row) {
let index = this.newList.findIndex((product) => {
return row.id == product.id
})
if (index !== -1) {
this.newList.splice(index, 1)
}
},
2、根据下标删除对应数据
<!-- 点击传入当前点击的下标 -->
<div v-for="(item,index) in list" :key="index">
<div @click="deletes(index)">
{{item.name}}
</div>
</div>
//拿到当前下标 通过splice方法删除当前下标所在数据
//index就是点击事件传过来的参数 下标
deletes(index){
this.list.splice(index, 1)
}
3、通过接口方式删除数据
<!-- 点击传入当前点击的数据 -->
<el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
//row获取到点击事件传来的参数
handleDelete(row) {
this.$confirm("确定删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
// 确认删除
.then(() => {
//删除接口只需要传个id就行了 id是当前点击事件传过来的的id
removedata({
id: row.id,
}).then((res) => {
if (res.code == 200) {
this.$message.success("删除成功");
//删除成功 回调列表接口
this.getData();
} else {
this.$message.error(res.msg);
}
});
})
//取消删除
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
vue删除功能
1、删除
<el-table-column label="状态">
// 获取当前行的所有数据
<template slot-scope="scope">
// 在这里添加点击事件方法 使用上边获取当前行所有数据 传入id值
<el-button type="danger" icon="el-icon-delete" circle @click="delInfo(scope.row.id)"></el-button>
</template>
</el-table-column>
2、点击事件方法
async delInfo (id) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
// 调接口 赋值给 res
const { data: res } = await this.$ajax.delete('users/' + id)
// 判断状态 返回成功或失败
if (res.meta.status !== 200) return this.$message.error('删除失败')
this.$message.success('删除成功')
// 重新渲染页面
this.getUserList()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
