vue 点击删除常用方式_vue删除功能怎么做

一、根据id删除对应数据

<!-- 点击传入当前点击的数据 -->
<el-button type="dangerous" @click="handleClickDelProduct(scope.row)">删除</el-button>
1
2

//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)
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12

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

<!-- 点击传入当前点击的下标 -->
	<div v-for="(item,index) in list" :key="index">
		<div @click="deletes(index)">
			{{item.name}}
		</div>
	</div>
1
2
3
4
5
6

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

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

<!-- 点击传入当前点击的数据 -->
 <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
1
2

//row获取到点击事件传来的参数
handleDelete(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      // 确认删除
        .then(() => {
        //删除接口只需要传个id就行了 id是当前点击事件传过来的的id 
          removedata({
            id: row.id,
          }).then((res) => {
            if (res.code == 200) {
              alert("删除成功");
              //删除成功 回调列表接口 
              this.getData();
            } else {
              alert(res.msg);
            }
          });
        })
        //取消删除
        .catch(() => {
          alert('取消')
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27