如何处理table在做任何操作时选中数据保留

1. 在onMounted先清空存储

  // 清空复选框勾选的数据

  store.commit('checkboxTabListFun', [])

2. 多选方法时，把当前页面选中的数据存储下来

const selectionChange = async (v) => {

      state.countList = v

}

3. 引入store存储值

import { useStore } from 'vuex'

const store = useStore()

*********** 在store中，存储 table切换分页选中的数据    ************

checkboxTabList: []

checkboxTabListFun(state, list) {

        state.checkboxTabList = list

}

4. 数据处理

// 引用封装方法 处理选中的值

    const list = DataCalculation(tableList, selectedList, storeList, 'arn')

// 将选中的值存储在store

    store.commit('checkboxTabListFun', list)

// 处理页面展示时选中的值

    state.tableData = await ResetData(tableList, storeList, 'arn')

封装方法

/**

 * 列表多选  选中的值

 * 参数

 * @param {*} tableList 原数据

 * @param {*} selectedList 选中的数据

 * @param {*} storeList 存储在store选中的数据

 * @param {*} field 唯一标识

 */

// 列表多选 在不同切换情况下保持选中的存储

function DataCalculation(tableList, selectedList, storeList, field) {

          // 当前页面未选中项

          const emptyList = _.differenceWith(tableList, selectedList, (r, s) => r[field] === s[field])

          // 去他页面所有选中的项 以及本页面之前选中的项

          const otherList = _.uniq(_.concat(storeList, selectedList))

          // 去掉本页的值

          const list = _.differenceWith(otherList, emptyList, (r, s) => r[field] === s[field])

          return list

}

/**

 * 列表数据重置

 * 参数

 * @param {*} tableList 原数据

 * @param {*} selectedList 选中的数据

 * @param {*} field 唯一标识

 */

// 处理列表最后展示得知

function ResetData(oldList, newList, field ) {

      if (oldList.length) {

            _(oldList).forEach(function(o) {

                      _(newList).forEach(function(i) {

                            if (i[field] === o.[field]) {

                                  o.checked = true

                            }

                      })

           })

      }

      return newList

}