vue表格横竖屏切换问题

在 Vue 中进行表格横竖屏切换可以通过 CSS 来实现。可以定义两个不同的 CSS 类，一个用于横屏显示表格，一个用于竖屏显示表格，然后通过 JavaScript 在横竖屏切换时动态地添加或删除对应的 CSS 类。

下面是一个简单的示例代码：

<template>
  <div class="table-container" :class="{ 'table-horizontal': isHorizontal }">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHorizontal: false, // 是否横屏显示表格
    };
  },
  mounted() {
    // 监听窗口大小改变事件
    window.addEventListener('resize', this.handleResize);
    // 初始化时执行一次
    this.handleResize();
  },
  methods: {
    // 处理窗口大小改变事件
    handleResize() {
      this.isHorizontal = window.innerWidth > 768; // 设置阈值，大于 768px 为横屏显示
    },
  },
};
</script>

<style>
.table-container {
  overflow: auto; /* 添加滚动条 */
}

.table-horizontal table {
  writing-mode: vertical-lr; /* 竖排文字 */
  transform: rotate(-180deg); /* 翻转表格 */
}

@media screen and (min-width: 768px) {
  .table-horizontal table {
    writing-mode: horizontal-tb; /* 横排文字 */
    transform: none; /* 恢复表格 */
  }
}
</style>

在上面的代码中，我们通过 `isHorizontal` 变量来控制表格的横竖显示。在 `mounted` 钩子函数中，我们监听窗口大小改变事件，并在该事件处理函数中根据窗口大小来设置 `isHorizontal` 变量的值。在模板中，我们动态地绑定了 `table-container` 的 CSS 类，如果 `isHorizontal` 为 `true`，则添加 `table-horizontal` 类，否则不添加。在 CSS 中，我们使用了 `writing-mode` 和 `transform` 属性来实现表格的横竖显示。在视口宽度大于 768px 时，我们使用 `@media` 查询来恢复表格的横排文字和正常显示。