vue 点击删除常用方式小结

目录

• 点击删除常用方式
• 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: '已取消删除'
        })
      })
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。