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
在关闭页面之后,选中状态会被清除,因为在下次打开页面时组件会重新渲染,此时选中状态会重置为默认值。如果需要在关闭页面后保留选中状态,可以将选中的数据保存到本地存储中,例如使用localStorage。然后在组件重新渲染时,从本地存储中获取选中的数据,并将其设置为选中状态。可以在组件的created钩子函数中添加代码来实现这个功能。以下是一个示例:
<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 {
Scheduledtasks: false,
PlantableData: [], // 表格数据
selectedRows: [] // 选中的数据
};
},
created() {
this.selectedRows = JSON.parse(localStorage.getItem('selectedRows')) || [];
},
methods: {
PlanleSelectionChange(selection) {
this.selectedRows = selection;
localStorage.setItem('selectedRows', JSON.stringify(selection));
},
deleteRows() {
// 删除选中的数据
this.PlantableData = this.PlantableData.filter(
item => !this.selectedRows.includes(item)
);
// 清除选中状态
this.$refs.multipleTableRef.clearSelection();
// 更新本地存储中的选中数据
localStorage.setItem('selectedRows', JSON.stringify(this.selectedRows));
}
}
};
</script>
在上述示例中,使用selectedRows数组保存选中的数据,使用PlanleSelectionChange方法来监听选中状态的变化,并将选中的数据保存到selectedRows数组中,并将其存储到本地存储中。在删除操作中,通过clearSelection方法清除选中状态,并更新本地存储中的选中数据。这样,在关闭页面后再次打开页面时,选中状态可以得到恢复
原文地址: http://www.cveoy.top/t/topic/hV1V 著作权归作者所有。请勿转载和采集!