el-table缓存数据

问题遇到的现象和发生背景

在使用el-table 勾选数据 先勾选 在刷新 勾选的数据被清空

问题相关代码，请勿粘贴截图

<template>
    <el-dialog :model-value="props.modelValue" title="选择老师" width="950px" center :before-close="beforeClose">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="校区：">
                <el-input v-model="schoolName" placeholder="请输入校区名称">el-input>
            el-form-item>
            <el-form-item label="教师名称：">
                <el-input v-model="teacherName" placeholder="请输入教师名称">el-input>
            el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="searchTeachers">搜索el-button>
                <el-button type="primary" size="mini" @click="handleReset">刷新el-button>
            el-form-item>
        el-form>
        <el-table
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center', background: '#f2f2f2' }"
            ref="multipleTable"
            :data="tableTeacherData.data"
            style="width: 100%"
            stripe
            :border="true"
            :align="'center'"
            empty-text="暂无数据"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" @click="handleTeacher" />
            <el-table-column prop="t_name" label="教师名字" width="300" />
            <el-table-column prop="t_level" label="教师级别" width="300" />
            <el-table-column prop="branch_name" label="学校名称" />
        el-table>
        <div class="demo-pagination-block">
            <el-pagination
                @size-change="sizeChange()"
                @current-change="currentChange"
                v-model:current-page="pageSize"
                v-model:page-size="pagelimit"
                background
                layout=" prev, pager, next, jumper"
                :total="tableTeacherData.count"
            />
        div>
        <div class="footer">
            <el-button type="primary" @click="confirm">确定el-button>
            <el-button plain @click="beforeClose">取消el-button>
        div>
    el-dialog>
template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { getTeacher } from '@/api/book-setting'
import { ElMessage } from 'element-plus'

const props = defineProps({
    modelValue: { type: Boolean },
    getSelectionArray: { type: Array },
})
const emits = defineEmits(['update:modelValue', 'pickTeacher'])
console.log(props.getSelectionArray)
// console.log(props.getData)
const schoolName = ref('')
const teacherName = ref('')
const pagelimit = ref(10)
const pageSize = ref()

const tableTeacherData = reactive({
    count: 0,
    data: [],
})

//获取老师列表
const getTeachers = async () => {
    let params = {
        branch_id: '',
        tname: '',
        page: pageSize.value,
        limit: pagelimit.value,
    }
    let { code, data } = await getTeacher(params)
    if (code == 0) {
        tableTeacherData.count = data.count
        tableTeacherData.data = data.data
        // console.log(tableTeacherData.data)
        openDialog(data.data)
    } else {
        tableTeacherData.count = 0
        tableTeacherData.data = []
        ElMessage({
            message: '未获取老师列表',
            type: 'error',
        })
    }
}
getTeachers()

//多选
const multipleSelectionAll = ref([]) // 所有选中的数据包含跨页数据
const multipleSelection = ref([]) // 当前页选中的数据
const idKey = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    if (!multipleSelectionAll.value || multipleSelectionAll.value.length <= 0) {
        return
    }
    // 标识当前行的唯一键的名称
    const selectAllIds = ref([])
    multipleSelectionAll.value.forEach((row) => {
        selectAllIds.value.push(row[idKey])
    })
    // tableTeacherData.data.clearSelection()
    for (var i = 0; i < tableTeacherData.data.length; i++) {
        if (selectAllIds.value.indexOf(tableTeacherData.data[i][idKey]) >= 0) {
            // 设置选中，记住table组件需要使用ref="table"
            tableTeacherData.data.toggleRowSelection(tableTeacherData.data[i], true)
        }
    }
}

// 打开弹窗
const multipleTable = ref(null)
const openDialog = async (data) => {
    if (props.getSelectionArray.length) {
        props.getSelectionArray.forEach((v) => {
            nextTick(() => {
                data.find((v2) => {
                    if (v.t_id === v2.t_id) {
                        multipleTable.value.toggleRowSelection(v2, true)
                    }
                })
            })
        })
    } else {
        nextTick(() => {
            multipleTable.value.clearSelection()
        })
    }
}

//获取翻页之后勾选的状态
const changePageCoreRecordData = () => {
    // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
    if (multipleSelectionAll.value.length <= 0) {
        multipleSelectionAll.value = multipleSelection.value
        return
    }
    // 总选择里面的key集合
    let selectAllIds = ref([])
    multipleSelectionAll.value.forEach((row) => {
        selectAllIds.value.push(row[idKey])
    })
    let selectIds = ref([])
    // 获取当前页选中的id
    multipleSelection.value.forEach((row) => {
        selectIds.value.push(row[idKey])
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.value.indexOf(row[idKey]) < 0) {
            multipleSelectionAll.value.push(row)
        }
    })
}

const sizeChange = () => {
    // getTeachers()
    searchTeachers()
    changePageCoreRecordData()
}

const currentChange = () => {
    // pageSize.value = 1
    searchTeachers()
    changePageCoreRecordData()
    // openDialog(data)
}

// 搜索
const searchTeachers = async () => {
    let params = {
        page: pageSize.value,
        limit: pagelimit.value,
        branch_name: schoolName.value, //查询的学校名称或学校号
        tname: teacherName.value, //查询的上课老师
    }
    let { code, data } = await getTeacher(params)
    if (code === 0) {
        tableTeacherData.data = data.data
        tableTeacherData.count = data.count
        openDialog(data.data)
    } else {
        // ElMessage({
        //     message: '未查询到此位老师',
        //     type: 'warning',
        // })
        tableTeacherData.data = []
        tableTeacherData.count = 0
        openDialog(data.data)
    }
}

//缓存数据
const handleTeacher = () => {
    // tableTeacherData.value.push({ id: 6, name: 'hello' })
    window.localStorage.setItem('tableTeacherData', JSON.stringify(tableTeacherData.value))
    console.log(window.localStorage)
}
// 重置
const handleReset = () => {
    tableTeacherData.data = []
    tableTeacherData.count = 0
    pageSize.value = 1
    pagelimit.value = 10
    schoolName.value = ''
    teacherName.value = ''
    searchTeachers()
}

//确定
const confirm = () => {
    emits('pickTeacher', multipleSelection.value)
    emits('update:modelValue', false)
}

//取消
const beforeClose = () => {
    emits('update:modelValue', false)
}
script>

<style lang="scss" scoped>
.el-form {
    width: 100%;
    height: 40px;
    margin-top: -20px;
    .el-form-item {
        .el-input {
            width: 180px;
            height: 35px;
            margin-left: -10px;
            margin-bottom: 20px;
        }
        .el-button {
            // width: 60px;
            margin-left: 5px;
            margin-bottom: 20px;
        }
    }
}
.el-table {
    width: 80%;
    height: 100%;
    .el-table-column {
        text-align: center;
    }
}
.demo-pagination-block {
    margin-top: 10px;
    .el-pagination {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-content: center;
    }
}
.footer {
    margin-top: 20px;
    margin-left: 350px;
    padding: 0 40px;
}
style>

运行结果及报错内容

不报错 但是勾选的数据会被清空

我的解答思路和尝试过的方法

缓存 但是加入不了 keep-alive也不行

我想要达到的结果

刷新以后勾选的数据还是存在

toggleRowSelection

可以尝试直接写入到游览器缓存 ， 比如：localstorage 中。
刷新按钮点击的时候，把数据写入 ， 刷新按钮结束后，从localstorage中判断取出 ，回填到勾选中。
只要你不清除缓存， 那么这个数据可以长时间保留。

那 建议

1. 用接口实现 。把勾中的key值 存起来
2. 本地存储 。但不建议这样做

这边建议直接揍产品经理一顿呢