el-table多选模式下跨分页保留当前页选项

1 效果图

2 完整代码

tableSpanningAcrossPagesSelectDailog.vue

javascript 复制代码

<!-- 固定资产改造项目申请单  获取可分配的台账 -->
<template>
  <div class="dynamic-table" v-loading="loading">
    <el-dialog v-model="dialogVisible" title="表格跨分页选择" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false" width="70%" :before-close="handleClose" @open="openDialog" @close="closeDialog">
      <div class="list-page" v-loading="loading">
        <el-table ref="tableRef" :data="tableData" scrollbar-always-on border row-key="编号" max-height="500"
          style="margin-top: 10px;" @selection-change="selectionChange" @select="rowSelectChange"
          @select-all="handleSelectAll">
          <el-table-column type="selection" reserve-selection width="55px" />
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="编号" label="编号"></el-table-column>
        </el-table>
        <el-pagination v-model:current-page="searchForm.pageNum" v-model:page-size="searchForm.pageSize"
          :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" @click="dialogVisible = false">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submitDialog">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="setup">
import { ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus';

const emit = defineEmits(['setTableData'])

const dialogVisible = ref(false)
const searchForm = ref({
  pageNum: 1,
  pageSize: 10
})

const arr = ref([{ 编号: "1" }, { 编号: "2" }, { 编号: "3" }, { 编号: "4" }, { 编号: "5" }, { 编号: "6" }, { 编号: "7" }, { 编号: "8" }, { 编号: "9" }, { 编号: "10" }, { 编号: "11" }, { 编号: "12" }, { 编号: "13" }, { 编号: "14" }, { 编号: "15" }, { 编号: "16" }, { 编号: "17" }, { 编号: "18" }, { 编号: "19" }, { 编号: "20" },])
const tableData = ref([])
const selectTableData = ref([])
const total = ref(20)
const tableRef = ref()
const loading = ref(false)

const getList = () => {
  nextTick(() => {
    tableData.value.forEach(x => {
      if (selectTableData.value.find(v => v.编号 == x.编号)) return tableRef.value.toggleRowSelection(x, true)
    })
  })
}

// 查询
const search = () => {
  getList()
}

// 重置
const reset = () => {
  searchForm.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

const handleSizeChange = (e) => {
  searchForm.value.pageSize = e
  getList()
}

const handleCurrentChange = (e) => {
  tableData.value = arr.value.slice((e - 1) * 10, e * 10)
  searchForm.value.pageNum = e
  getList()
}

const selectionChange = (e, row) => {
  // selectTableData.value.push(...e)
}

const rowSelectChange = (e, row) => {
  selectTableData.value.push(...e)
  // 如果选中行内  未 找到操作行，则视为 操作行 取消选择，此时清除 selectTableData.value 的这个行
  if (!e.find(x => x.编号 == row.编号) || !e.length) selectTableData.value = selectTableData.value.filter(x => x.编号 != row.编号)
}

const handleSelectAll = (e) => {
  if (!e.length) {
    let arr = []
    selectTableData.value.forEach(x => {
      if (!tableData.value.some(v => v.编号 == x.编号)) arr.push(x)
    })
    selectTableData.value = arr
  } else {
    selectTableData.value.push(...e)
  }
}

// 提交已选台账
const submitDialog = () => {
  const arr = selectTableData.value.filter((item, index, self) =>
    index === self.findIndex(t => t.编号 === item.编号)
  );
  if (!arr.length) return ElMessage.warning('请选择台账!')
  dialogVisible.value = false
  emit('setTableData', arr)
}

const openDialog = () => {
  tableData.value = arr.value.slice(0, 10)
  getList()
}

const closeDialog = () => {
  searchForm.value = {
    编号: null,
    pageNum: 1,
    pageSize: 10
  }
  tableRef.value.clearSelection()
}

defineExpose({
  dialogVisible,
  searchForm,
  selectTableData
})
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  .el-dialog__body {
    padding: 0 12px;
  }

  .el-dialog__footer {
    padding: 10px 20px;
  }

  .el-pagination {
    margin-top: 12px;
    justify-content: flex-end;
  }

  .el-pagination__sizes {
    width: 150px;
  }
}

:deep(.el-col) {
  margin-bottom: 16px;
}
</style>

页面文件

javascript 复制代码

<template>
  <el-button type="primary" @click="openDialog">打开表格跨分页选择</el-button>
  <tableSpanningAcrossPagesSelectDailog ref="tableSpanningAcrossPagesSelectDailogRef" @setTableData="setTableData" />

</template>

<script setup name="setup">
import { ref } from 'vue'
import tableSpanningAcrossPagesSelectDailog from './commonDialog/tableSpanningAcrossPagesSelectDailog.vue'

const tableData = ref([])

const tableSpanningAcrossPagesSelectDailogRef = ref()

const openDialog = () =>{
  tableSpanningAcrossPagesSelectDailogRef.value.selectTableData = tableData.value
  tableSpanningAcrossPagesSelectDailogRef.value.dialogVisible = true
}

const setTableData = (val) => {
  console.log(val);
  tableData.value = val
}
</script>

<style scoped lang="less">

</style>