VUE前端删除和批量删除-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE前端删除和批量删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下面给大家介绍一下前端的删除方法，在开发中我们常常会碰到这种业务，有一些数据需要在前端进行删除，我们并不希望他走后端的接口，而是在点击提交或者其他的业务完成后才走接口，这时我们就用到了vue的前端删除方法。

首先给大家介绍一下删除一条数据的情况：

在element ui的el-table 我们需要先写出删除按钮

<el-table
  ref="departmentTable"
  :data="tableDepartmentList.data"
  style="width: 100%"
  @selection-change="handleSelectionChangeDepartment"
  >
  <el-table-column label="操作" width="70">
    <template slot-scope="scope">
      <span style="cursor: pointer" @click="deleteDepartmentRow(scope.$index)">
          <i class="el-icon-delete"></i>
      </span>
    </template>
  </el-table-column>
</el-table>
<!--  scope.$index 就是你删除的数据在第几行，第一行就返回1，以此类推。把这个参数传入用于删除 -->

接下来就可以在methods 中定义出这个方法了

methods: {
	deleteDepartmentRow(index) {
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.tableDepartmentList.data.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
}
// 第九行代码就是执行的删除方法，this.tableDepartmentList.data，是el-table绑定的数据，不多解释。splice()方法中可以传入1-3个
// 参数，这里只介绍俩参数的 其他的大家可以去查一下，很简单。
// 当splice(index, 1)中传入两个参数的意思就是: index就是刚刚我们传入的行数，就是删除刚刚我们选中那行的数据. 1代表删除一条

批量删除：

批量删除我们需要配合el-table中的 selection来使用，也就是下面的第七行

<el-table
          ref="departmentTable"
          :data="tableDepartmentList.data."
          style="width: 100%"
          @selection-change="handleSelectionChangeDepartment"
          >
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column label="操作" width="70">
    <template slot-scope="scope">
      <span style="cursor: pointer" @click="deleteDepartmentRow(scope.$index, scope.row)">
        <i class="el-icon-delete"></i>
      </span>
    </template>
  </el-table-column>
</el-table>
<el-button @click="deleteSelected()">批量删除</el-button>

首先需要注意的是 @selection-change=“handleSelectionChangeDepartment”

@selection-change 是组件当中自带的一个方法，它可以取到我们选择的行的值，所以我们在data中定义一个数组，用于保存这些值，官方组件中有解释，大家可以去看看文章来源地址https://www.toymoban.com/news/detail-517215.html

data() {
 return {
	multipleSelectionDepartment: [],
 }
},
methods: {
	// 用于保存选中的行
	handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
    },
    deleteSelected(){
      this.$confirm('此操作将批量删除部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let val = this.multipleSelectionDepartment     //选中的值
        if (val) {
          val.forEach((val, index) => {                 // 这块看不明白的话看下面的解释
            this.tableDepartmentList.data.forEach((v, i) => {   
              if (val.deptName === v.deptName) {
                this.tableDepartmentList.data.splice(i, 1)
              }
            })
          })
        }
        this.$message.success("删除成功")
      })
    },
}
// 第一层循环就是循环我们选中的值，第二层循环就是循环我们this.tableDepartmentList.data 中所有的值，然后去判断，
// 如果有一样的数据的话就进行删除

到了这里，关于VUE前端删除和批量删除的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！