在关闭页面之后,选中状态会被清除,因为在下次打开页面时组件会重新渲染,此时选中状态会重置为默认值。如果需要在关闭页面后保留选中状态,可以将选中的数据保存到本地存储中,例如使用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方法清除选中状态,并更新本地存储中的选中数据。这样,在关闭页面后再次打开页面时,选中状态可以得到恢复

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

原文地址: http://www.cveoy.top/t/topic/hV1V 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录