移动端table组件(带全屏旋转功能)——解决Ant Design Vue的a-table组件旋转页面后在移动端中滚动轴失效的问题

在Ant Design Vue中，如果你想要一个带有全屏旋转功能的表格组件，你可以通过结合使用a-table和a-space组件，以及一些JavaScript代码来实现这个功能。

以下是一个简单的示例，展示了如何为Ant Design Vue的a-table组件添加全屏旋转功能：

<template>
  <a-space direction="vertical">
    <a-button @click="toggleRotate">
      {{ isRotated ? '取消旋转' : '旋转页面' }}
    </a-button>
    <div :class="{ rotated: isRotated }">
      <a-table :columns="columns" :dataSource="data"></a-table>
    </div>
  </a-space>
</template>
 
<script>
export default {
  data() {
    return {
      isRotated: false,
      columns: [
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
        { title: 'Address', dataIndex: 'address' },
      ],
      data: [
        { key: '1', name: 'John Doe', age: 32, address: '123456, Some Street' },
        // ... more data
      ],
    };
  },
  methods: {
    toggleRotate() {
      this.isRotated = !this.isRotated;
    },
  },
};
</script>
 
<style>
.rotated {
  transform: rotate(90deg);
  transform-origin: top left;
  overflow: hidden;
  width: 100vh;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

在这个示例中，我们使用了一个按钮来切换isRotated数据属性，该属性控制旋转类.rotated是否应用于表格的父元素。CSS类.rotated使用CSS transform属性将表格组件旋转90度，并通过设置宽高和定位来适应全屏显示。这样，当用户点击按钮时，页面的表格就会旋转显示或恢复原状。