h5兼容table ，如何实现h5在app内使用h5渲染table表格而且实现横屏预览？

压图地址

在这里插入图片描述

横屏div 通过css 实现

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


 <div
    class="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>
   <div
    class="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)