element table批量删除_vue+element实现批量删除功能的示例

今年开始学习vue+element实现后台开发，在实现批量删除功能时有2个小知识点记录在下：

1、如何实现单击行交替选中当前行的复选框，element官网的table实例中没有找到。——通过row-click和toggleRowSelection实现

2、如何获取选中行的值来实现批量删除。——通过selection-change实现

代码如下

html：

批量删除

编辑

删除

js：

export default {

name: 'product',

mounted() {

this.onSearch()

},

data() {

return {

sels: [],//选中的值显示

tableList: [],

total: 0,

start: 0,

size: 10

}

},

methods: {

selsChange(sels) {

this.sels = sels

},

delGroup() {

var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔

},

handleCurrentChange(row, event, column) {

this.$refs.table.toggleRowSelection(row)

}

}

}

以上这篇vue+element实现批量删除功能的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

本文标题: vue+element实现批量删除功能的示例

本文地址: http://www.cppcns.com/ruanjian/java/221355.html