11.Vue+elementUI实现批量删除
前言:用vue和elementUI实现批量操作常见于table表格,前提是table表第一列是可以多选的框:<el-table-column type="selection" width="55"> </el-table-column>如上图所示,当没有选中任何一项时,批量删除按钮是不可点击的,当选中其中一项或多...
·
前言:
用vue和elementUI实现批量操作常见于table表格,前提是table表第一列是可以多选的框:
<el-table-column type="selection" width="55"> </el-table-column>
如上图所示,当没有选中任何一项时,批量删除按钮是不可点击的,当选中其中一项或多项时,批量删除按钮变成可点击;
下边就具体介绍一下,如何实现批量删除功能:
1.首先给按钮加disabled属性
<el-button size="small" type="primary" @click="batchDelete" :disabled="batchDeleteArr.length === 0">批量删除</el-button>
//data里事先声明batchDeleteArr
data:{
batchDeleteArr:[]
}
也就是说,当batchDeleteArr为空数组时,按钮不可点击;
2.给table添加change事件,动态获取batchDeleteArr
<el-table
:data="tableData"
:height="tableHeight"
v-loading="tableLoading"
border
stripe
size="mini"
style="width: 100%"
@selection-change="handleSelectionChange">
......
然后在change事件动态获取batchDeleteArr
handleSelectionChange(val) {
this.batchDeleteArr = val
},
如果选中table表中的某一项或其中几项,batchDeleteArr 数组会动态更新,这时数组长度肯定不为0,批量删除按钮可点击;
3.执行批量删除方法batchDelete
// 批量删除
batchDelete () {
let deleteData = this.batchDeleteArr.map(item => {
const {server_asset_id} = item
return {server_asset_id}
})
this.deleteApi(deleteData)
},
上边代码意思是,首先map遍历batchDeleteArr,将选中的某几项的id返回出去,
然后去调用删除一项的方法deleteApi,并以获取到的id组成的数组deleteData为参数
deleteApi(data) {
const _this = this
this.$confirm("确定删除?", '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
const response = await _this.$post(server_asset_info_del.url, data)
this.$message({
message: response.msg,
type: 'success',
duration: 1500,
onClose: function () {
let form = {
"page": _this.page,
"limit": _this.limit
}
_this.getData(form)
}
});
})
},
此时需要注意的是,deleteApi删除方法,传递的参数为数组类型,所以在页面,删除按钮,传的参数也得是数组类型:
<el-button type="primary" size="mini" @click="deleteApi([{'server_asset_id':scope.row.server_asset_id}])">删除</el-button>
至此,vue+elementUI实现批量删除操作就完成了。记录一下,以便于日后遇到可以及时运用。
更多推荐
已为社区贡献3条内容
所有评论(0)