![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYTMfhHLlN3XnxCM38FdsYkRGZkRG9lcvx2bjxiM08VZ6l2csElMhVzULdTNSVnY2A1QZZDWpJXNBJUaUVkTxE1X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLlNTYjBDZlhjNhVWOyMGOhRDOhRTM3ImYlJWYykjN1EzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
根據多選框删除元素
<avue-crud ref="mainCurd"
:data="crudData"
:option="crudOp2"
@selection-change="handleSelectChange">
data() {
return {
crudData: [],
crudOp2: data.crudOp2,
// 多選框選擇
selectList: [],
}
},
methods: {
// 多選框選擇
handleSelectChange(select) {
this.selectList = select
},
async tempDelete() {
if (this.selectList.length == 0) {
return warning('未選擇删除資料!')
}
await cofirm('确定删除資料?').then((res) => {
// 周遊被選項
this.selectList.forEach((item) => {
// 儲存被删除資料的ID
this.deleteData.push(item['id'])
// 儲存被删除資料的索引
let idx = this.crudData.findIndex(
(crudItem) =>
crudItem['id'] === item['id']
)
// 根據索引一次性删除
this.crudData.splice(idx, 1)
})
})
},
}