SoFunction
Updated on 2025-04-11

VUE front-end deletion and batch deletion implementation code

Preface

Let me introduce the method of deleting the front-end. During development, we often encounter this kind of business. Some data needs to be deleted on the front-end. WeDon't want him to go to the backend interface, but only after clicking for submission or other business completion, we used vueFront-end deletionmethod.

First, let me introduce to you the situation of deleting a data:

In the el-table element ui we need to write out the delete button first

<el-table
  ref="departmentTable"
  :data=""
  style="width: 100%"
  @selection-change="handleSelectionChangeDepartment"
  >
  <el-table-column label="operate" 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 That is, the data you deleted is in which line，Return the first line1，And so on。Pass this parameter in for deletion -->

Next, you can define this method in methods

methods: {
	deleteDepartmentRow(index) {
      this.$confirm("This operation will delete the information, will it continue?", "hint", {
        confirmButtonText: "Sure",
        cancelButtonText: "Cancel",
        type: "warning"
      })
          .then(() => {
            (index, 1);
            this.$message({
              type: "success",
              message: "Delete successfully!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "Undeleted"
            });
          });
}
// The ninth line of code is the deletion method executed, which is the data bound to el-table, and will not be explained much.  1-3 can be passed in the splice() method// Parameters, here are only two parameters. You can check the others, it is very simple.// whensplice(index, 1)The meaning of passing two parameters in it is: indexIt's the number of lines we just passed in，It is to delete the data from the row we just selected. 1Delete one

Batch deletion:

We need to use batch deletion with the selection in el-table, which is the seventh line below

<el-table
          ref="departmentTable"
          :data="."
          style="width: 100%"
          @selection-change="handleSelectionChangeDepartment"
          >
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column label="operate" 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>
<el-button @click="deleteSelected()">Batch Delete</el-button>

The first thing to note is @selection-change="handleSelectionChangeDepartment"

@selection-change is a method that comes with the component. It can get the values ​​of the rows we selected, so we define an array in data to save these values. There is an explanation in the official component. You can go and have a look.

data() {
 return {
	multipleSelectionDepartment: [],
 }
},
methods: {
	// Used to save selected rows	handleSelectionChangeDepartment(val) {
       = val;
    },
    deleteSelected(){
      this.$confirm('This operation will delete the department in batches, will it continue?', 'hint', {
        confirmButtonText: 'Sure',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        let val =      //The selected value        if (val) {
          ((val, index) => {                 // If you don't understand this, please see the explanation below            ((v, i) => {   
              if ( === ) {
                (i, 1)
              }
            })
          })
        }
        this.$("Delete successfully")
      })
    },
}
// The first layer loop is to loop the values ​​we selected, and the second layer loop is to loop all the values ​​in us, and then judge,// If there is the same data, delete it

Summarize

This is the article about VUE front-end deletion and batch deletion. For more related VUE batch deletion content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!