vue|vue 点击删除常用方式小结 vue点击删除常用方式小结

点击删除常用方式

1、根据id删除对应数据
2、根据下标删除对应数据
3、通过接口方式删除数据

vue删除功能

1、删除
2、点击事件方法

点击删除常用方式
1、根据id删除对应数据

删除

//ES6//根据id查找元素 findIndex//函数内如果返回true，就结束遍历并返回当前index; //index如果没有找到返回-1handleClickDelProduct(row) {let index = this.newList.findIndex((product) => {return row.id == product.id})if (index !== -1) {this.newList.splice(index, 1)}},

2、根据下标删除对应数据

{{item.name}}

//拿到当前下标通过splice方法删除当前下标所在数据//index就是点击事件传过来的参数下标deletes(index){this.list.splice(index, 1)}

3、通过接口方式删除数据

删除

//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、删除

// 获取当前行的所有数据

2、点击事件方法

async delInfo (id) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async () => {// 调接口赋值给 resconst { 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: '已取消删除'})})}

【vue|vue 点击删除常用方式小结】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。