压图地址

横屏div 通过css 实现

transform: rotate(90deg);
transformOrigin: '50vw 50vw' ;
height: 100vw;
width: '100vh';

<divclass="popup-box":style="{transform: originSet === 0 ? 'rotate(90deg)' : '',transformOrigin: originSet === 0 ? '50vw 50vw' : '',height: originSet === 0 ? '100vw' : '100vh',width: originSet === 0 ? '100vh' : '100vw',}">
</div>

表格通过 ant-design-vue的 <a-table></a-table> 实现

<a-table:columns="propList":data-source="list":scroll="{ x: 10000, y: tableY }"@change="handlePageChange":pagination="{current: current,total: totals,defaultPageSize: pagesize,pageSize: pagesize,}"><template #headerCell="{ column }"><span class="title1">{{ column.title }}</span></template></a-table>

完整源码：

<template><divclass="popup-box":style="{transform: originSet === 0 ? 'rotate(90deg)' : '',transformOrigin: originSet === 0 ? '50vw 50vw' : '',height: originSet === 0 ? '100vw' : '100vh',width: originSet === 0 ? '100vh' : '100vw',}"><div class="bottom-fiexd" ref="fixedDiv"></div>  <div><a-table:columns="propList":data-source="list":scroll="{ x: 12500, y: tableY }"@change="handlePageChange":pagination="{current: current,total: totals,defaultPageSize: pagesize,pageSize: pagesize,}"><template #headerCell="{ column }"><span class="title1">{{ column.title }}</span></template></a-table></div></div>
</template>
<script setup lang="js">
import { Table } from 'ant-design-vue'
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import dataSouce from './t.js'
import columen from './head.js'// 控制横屏竖屏
const originSet = ref(0)
const route = useRoute();
const router = useRouter();
const fixTop = ref();
const fixedDiv = ref();const propList = ref([]);
const list = ref([]);const totals = ref('100');const filterActive = ref('');
// const filterList = ref([]);
// 审批任务ID
const taskId = ref('');const a = () => {if (columen.data && columen.data.length) {propList.value = columen.data.map((item, index) => {item = {title: item.a,width: 100,dataIndex: id,key: item.key,fixed: index === 0 ? 'left' : undefined,};return item;});}};// 统计数据
const totalInfo = ref({});
const currentPage = ref(1);
const pagesize = ref(3);
const searchVal = ref('');const b= () => {if (dataSouce.data.list && dataSouce.data.list.length) {list.value = dataSouce.data.list;}
};// 页码变化
const PageChange = ({ current, defaultPageSize, pageSize, total}) => {currentPage.value = current;pagesize.value = pageSize;b();
};const tableY = ref(190);onMounted(() => {taskId.value = route.query.id;filterActive.value = route.query.filterActive;a();b();const fixTopsH = fixTop.value.offsetHeight;const fixedDivH = fixedDiv.value.offsetTop;tableY.value = fixedDivH - fixTopsH - 100;
});
</script>[压图地址](https://yatu.di6gan.cn/#/single)