前端表格静态分页+弹框预览已勾选

image.png

<template>
 <el-button @click="handlePreview">预览已勾选</el-button>
 <el-table @selection-change="handleOuterSelectionChange" :data="paginatedTableData" ref="outerSelectedDataRef" :row-key="'id'" >
  <el-table-column type="selection" reserve-selection></el-table-column>
   <el-table-column label="日期" width="180">
    <template #default="scope">
      {{ scope.row.date }}
    </template>
  </el-table-column>
   <el-table-column label="姓名">
    <template #default="scope">
      {{ scope.row.name }}
    </template>
  </el-table-column>
   <el-table-column label="地址">
    <template #default="scope">
      {{ scope.row.address }}
    </template>
  </el-table-column>
 </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="originTableData.length"
    ></el-pagination>
<!--  预览弹框-->
  <el-dialog v-model="dialogVisible" title="预览已勾选">
    <el-table :data="outerSelectedData" ref="innerSelectedDataRef" @selection-change="handleInnerSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="日期" width="180">
        <template #default="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template #default="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="dialogVisible=false">取消</el-button>
    <el-button @click="handleSubmit">确认取消</el-button>
  </el-dialog>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const outerSelectedData = ref([]);
const innerSelectedData=ref([])
const currentPage = ref(1);
const pageSize = ref(10);
//最初数据
const originTableData = reactive([
 {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄',
   id:'003'
 },
 {
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
   id:'001'
 },
 {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1516 弄',
   id:'004'
 },
 {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄',
   id:'002'
 },
 {
  date: '2016-05-06',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1515 弄',
   id:'005'
 },
 {
  date: '2016-05-07',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1514 弄',
   id:'006'
 },
 {
  date: '2016-05-08',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1513 弄',
   id:'007'
 },
 {
  date: '2016-05-09',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1512 弄',
  id:'008'
 },
 {
  date: '2016-05-10',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1511 弄',
  id:'009'
 },
 {
  date: '2016-05-11',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1510 弄',
  id:'010'
 },
 {
  date: '2016-05-12',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1509 弄',
  id:'011'
 },
 {
  date: '2016-05-13',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1508 弄',
  id:'012'
 },
 {
  date: '2016-05-14',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1507 弄',
  id:'013'
 },
 {
  date: '2016-05-15',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1506 弄',
  id:'014'
 },
 {
  date: '2016-05-16',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1505 弄',
  id:'015'
 }


])
//静态分页的数据
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return originTableData.slice(start, end);
})

function handleCurrentChange(val) {
  currentPage.value = val;
}

function handlePreview(){
  dialogVisible.value = true;
  nextTick(() => {
    if (proxy.$refs.innerSelectedDataRef) {
      proxy.$refs.innerSelectedDataRef.clearSelection();
      outerSelectedData.value.forEach(row => {
        proxy.$refs.innerSelectedDataRef.toggleRowSelection(row, true);
      });
    }
  });
}

 function handleOuterSelectionChange (val) {
  outerSelectedData.value = val;
}
function handleInnerSelectionChange (val) {
  innerSelectedData.value=val;
}
function handleSubmit(){
  dialogVisible.value = false;
  proxy.$refs.outerSelectedDataRef.clearSelection();
  innerSelectedData.value.forEach(row => {
    originTableData.forEach((item)=>{
      if(item.id===row.id){
        proxy.$refs.outerSelectedDataRef.toggleRowSelection(item, true);
      }
    });
  });
}
</script>