部门管理 - 批量删除功能
<div class='flex justify-end items-center' style='margin-bottom: var(--el-card-padding);'>
<el-button type='danger' plain @click='handleBatchDelete()'><i-ep-plus />批量删除</el-button> </div>
<pre><code> <el-table ref='dataTableRef' v-loading='loading' :data='deptList' row-key='deptId' :indent='30' highlight-current-row
:cell-style='{ textAlign: 'center' }'
:header-cell-style='{ 'text-align': 'center', 'background-color': '#f8f8f9', }'
@selection-change='handleSelectionChange()'
>
<el-table-column type='selection' width='55' ></el-table-column>
<el-button type='primary' size='small' link @click='handleDelete(scope.row.deptId)'>
删除
</el-button>
</el-table>
</code></pre>
<script>
const selectedRows = [];// 存储选择的行数据
function handleSelectionChange(rows){
this.selectedRows = rows;
console.log('this.selectedRows是多少?',this.selectedRows);
console.log('selectedRows.length===是多少?',selectedRows.length);
}
// function handleBatchDelete(deptId?: string) {
function handleBatchDelete(row: DeptPageVO) {
console.log('按下了批量删除按钮111');
console.log('selectedRows',selectedRows);
console.log('selectedRows.length===',selectedRows.length);
console.log('批量删除row.deptId == ',deptId);
if(selectedRows.length > 0){
// 遍历selectedRows进行删除操作
this.selectedRows.forEach(row => {
this.handleDelete(row.deptId);
console.log('按下了批量删除按钮');
console.log('批量删除row.deptId == ',row.deptId);
console.log('selectedRows.length===',selectedRows.length);
});
// 清空选中的行数据
this.selectedRows = [];
}
};
请帮我完善function代码,实现批量删除功能内容:请尝试以下代码:
```javascript
function handleBatchDelete() {
if (this.selectedRows.length > 0) {
// 遍历selectedRows进行删除操作
this.selectedRows.forEach(row => {
this.handleDelete(row.deptId);
});
// 清空选中的行数据
this.selectedRows = [];
}
}
```
在此代码中,我们检查`selectedRows`数组的长度是否大于0,如果是,则使用`forEach`循环遍历`selectedRows`数组,并调用`handleDelete`函数来删除每一行数据。最后,我们清空`selectedRows`数组以确保不再有选中的行数据。
原文地址: https://www.cveoy.top/t/topic/qhqn 著作权归作者所有。请勿转载和采集!