el-dialog v-model=Scheduledtasks title=推送计划 width=95 height=95 !-- 循环显示系部内容 -- div div el-button type=primary click=add = true增加el-button el-button type=prim
要获取选中的行,可以使用selection-change事件,通过传入的参数selection获取选中的行数据。在点击删除按钮时,可以通过splice方法从静态列表中删除选中的行数据。
具体实现如下:
- 在data中定义一个变量selectedRows来保存选中的行数据:
data() {
return {
selectedRows: [], // 保存选中的行数据
...
};
},
- 在el-table组件上添加selection-change事件处理方法,将选中的行数据赋值给selectedRows变量:
<el-table
...
@selection-change="PlanleSelectionChange"
>
methods: {
PlanleSelectionChange(selection) {
this.selectedRows = selection;
},
...
},
- 在点击删除按钮时,根据selectedRows中的数据从静态列表中删除对应的行:
<el-button type="primary" @click="del = true">删除</el-button>
methods: {
...
deleteRows() {
for (let row of this.selectedRows) {
const index = this.PlantableData.indexOf(row);
if (index !== -1) {
this.PlantableData.splice(index, 1);
}
}
// 清空选中的行数据
this.selectedRows = [];
},
...
},
注意:在删除操作后要清空selectedRows变量,以防止重复删除。
完整示例代码如下:
<template>
<el-dialog v-model="Scheduledtasks" title="推送计划" width="95%" height="95%">
<div>
<div>
<el-button type="primary" @click="add = true">增加</el-button>
<el-button type="primary" @click="edit = true">修改</el-button>
<el-button type="primary" @click="deleteRows">删除</el-button>
</div>
<el-table
ref="multipleTableRef"
:data="PlantableData"
style="width: 100%"
@selection-change="PlanleSelectionChange"
>
<el-table-column type="selection" width="30" />
<el-table-column property="js" label="角色" show-overflow-tooltip />
<el-table-column label="时间">
<template #default="scope">{{ scope.row.sj }}</template>
</el-table-column>
<el-table-column property="rw" label="任务" />
<el-table-column property="zt" label="状态" />
</el-table>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
selectedRows: [], // 保存选中的行数据
Scheduledtasks: false,
add: false,
edit: false,
del: false,
PlantableData: [
{ js: '角色1', sj: '2021-01-01', rw: '任务1', zt: '进行中' },
{ js: '角色2', sj: '2021-01-02', rw: '任务2', zt: '已完成' },
],
};
},
methods: {
PlanleSelectionChange(selection) {
this.selectedRows = selection;
},
deleteRows() {
for (let row of this.selectedRows) {
const index = this.PlantableData.indexOf(row);
if (index !== -1) {
this.PlantableData.splice(index, 1);
}
}
// 清空选中的行数据
this.selectedRows = [];
},
},
};
</script>
``
原文地址: https://www.cveoy.top/t/topic/hVZu 著作权归作者所有。请勿转载和采集!