目标:选中表格内的单独某一行,点击删除按钮,实现在表格中删除;批量删除按钮在勾选选择框后才可以被激活,点击批量删除按钮后实现删除效果。
如图,点击删除按钮,弹出提示框,点击确定后删除这一行。单选采用d2-curd 的表格组件方法实现,表格组件d2-curd 方法可自行查阅文档,单说实现删除功能。(这里默认表格里的数据已经获取成功)
首先 要传入rowHandle 来开启列表操作列 ,即在列表中出现图上的修改这一列,很方便!以下代码片段中 confirm: true 是表示开启提示框,如果是false 就直接执行删除操作,而不会弹出提示框。
html
<d2-crud
:rowHandle="rowHandle"
@row-remove="handleRowRemove"
/>
js
rowHandle: {
remove: {
icon: 'el-icon-delete',
size: 'small',
fixed: 'right',
confirm: true
}
}
然后再methods里 通过handleRowRemove,携带index(当前的行索引), row(当前行的数据),setTimeout模拟一个异步过程,即3秒后触发message 最后done() 记得要写,是用来控制操作成功的
js
methods: {
handleRowRemove ({index, row}, done) {
setTimeout(() => {
// console.log(index)
// console.log(row)
this.$message({
message: '删除成功',
type: 'success'
})
done()
}, 300)
},
}
到这里,很简单的就实现了某一行的功能,接下来做多选删除的方法,如图:
首先要通过 selection-row实现选择框,通过selection-change 事件来管理选择项发生变化时触发的事件
<d2-crued
........
.......
selection-row
@selection-change="selsChange"
/>
<el-button type="danger" size="mini" plain @click="handleDelete(sels.map(i => i.id))" :disabled="this.sels.length===0">批量删除</el-button>
:disabled="this.sels.length===0" 意思是当选中的行为0时,这个按钮将为disabled。
通过selsChange事件删除勾选的行。
methods: {
selsChange(sels) {
this.sels = sels
},
在return 里 存选中的行数据 具体这样表示,
return{
sels: [],
}
这里的sels 存的是一个数组,因为是多选。
handleDelete(idArray) {
this.all = this.all.filter(i => !idArray.includes(i.id));
},
}
handleDelete事件,all就是我接收的模拟数据。
批量删除就完成了 。