vue 点击删除常用方式

一、根据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)
        }
    },

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

	<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)
	 }

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

 <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) {
              alert("删除成功");
              //删除成功 回调列表接口 
              this.getData();
            } else {
              alert(res.msg);
            }
          });
        })
        //取消删除
        .catch(() => {
          alert('取消')
        });
    },