vue+element的表格实现批量删除功能示例代码

下面是 "vue+element的表格实现批量删除功能示例代码" 的完整攻略：

1. 安装 Element UI 和 Axios

在开始之前，你需要先安装 Element UI 和 Axios，可以使用 npm 来安装:

npm install element-ui axios --save

同时在文件中引入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

2. 准备表格结构

先创建一个表格组件，可以使用 Element UI 的 el-table、el-table-column 和 el-button 来实现。具体的表格结构和渲染方法我们就不在这里详细讲解。

这里我们只需要在表格上加一个全选框和一个批量删除按钮，如下：

<el-table :data="tableData" style="width: 100%;">
  <el-table-column type="selection" width="60"></el-table-column>
  <el-table-column prop="date" label="Date" width="180"></el-table-column>
  <el-table-column prop="name" label="Name" width="180"></el-table-column>
  <el-table-column prop="address" label="Address"></el-table-column>
  <el-table-column label="Operation" width="120">
    <template slot-scope="scope">
      <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

<el-button size="small" type="danger" @click="batchDelete">Batch Delete</el-button>

3. 实现全选和反选

在 Vue 实例中，我们声明一个变量 selected 和 selectAll，并将全选框和表格数据双向绑定起来。同时分别编写函数 handleSelect 和 handleSelectAll：

data() {
  return {
    selected: [],
    selectAll: false,
    tableData: [
      { date: '2016-05-02', name: 'John', address: 'New York' },
      { date: '2016-05-04', name: 'Tom', address: 'Washington' },
      { date: '2016-05-01', name: 'Charlie', address: 'Chicago' },
      { date: '2016-05-03', name: 'George', address: 'Boston' }
    ]
  }
},
methods: {
  handleSelect(selection, row) {
    this.selected = selection
  },
  handleSelectAll(selection) {
    if (selection.length === this.tableData.length) {
      this.selectAll = true
    } else {
      this.selectAll = false
    }
    this.selected = selection
  },
}

同时在 el-table 上加上 @select 和 @select-all 事件：

<el-table :data="tableData" style="width: 100%;"
  @select="handleSelect"
  @select-all="handleSelectAll">
  <!-- el-table-column 的代码略 -->
</el-table>

4. 实现批量删除

在函数 batchDelete 中，我们使用 Axios 对表格中被选中的数据进行批量删除，同时修改表格数据，如下：

batchDelete() {
  if (this.selected.length === 0) {
    this.$message('Please select at least one item')
    return
  }

  this.$confirm('Are you sure you want to delete these items?', 'Batch Delete', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  }).then(() => {
    const deleteIndexs = []
    this.selected.forEach(item => {
      deleteIndexs.push(this.tableData.indexOf(item))
    })
    axios.post('/api/table/delete', deleteIndexs)
      .then(res => {
        if (res.data.code === 0) {
          this.$message('Delete Success!')
          this.selected = []
          this.selectAll = false
          this.tableData = this.tableData.filter((item, index) => {
            return deleteIndexs.indexOf(index) === -1
          })
        }
      })
  }).catch(() => {
    // cancel
  })
},

同时在 handleDelete 函数中，我们只需要删除单行数据即可。代码如下：

handleDelete(index, row) {
  this.$confirm('Are you sure you want to delete this item?', 'Delete', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  }).then(() => {
    axios.post('/api/table/delete', index)
      .then(res => {
        if (res.data.code === 0) {
          this.$message('Delete Success')
          this.tableData.splice(index, 1)
        }
      })
  }).catch(() => {
    // cancel
  })
},

示例说明

示例一

上述的完整代码中，我们使用 axios.post('/api/table/delete') 来进行删除操作。但是这个接口需要在后端进行相应的实现，才可以调用成功，否则会报错。

示例二

在实现全选和反选的时候，我们通过双向绑定的方式来将选择的行与全选框绑定在一起。这样在每次勾选或取消勾选的时候，都可以通过修改数据来实现全选和反选的功能。