使用element-ui如何将table横向变为竖向

在Element UI中，如果想要将表格从默认的水平布局变更为垂直布局（通常是侧滑展示或者瀑布流布局），你可以使用`el-table-column`组件的`show-header`属性来控制表头是否显示，以及通过设置`type`属性来改变列的方向，例如`type="vertical"`。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 设置一列的 type 为 vertical -->
    <el-table-column prop="name" label="Name" width="180" show-header :type="isVertical ? 'vertical' : 'default'" v-model="isVertical">
      <!-- 如果需要，可以在此列添加展开行功能 -->
      <template slot-scope="{ $index, row }">
        <!-- 展开内容 -->
        <div>详细信息</div>
      </template>
    </el-table-column>

    <!-- 其他列... -->

    <!-- 切换列方向的开关 -->
    <el-switch v-model="isVertical" @change="toggleColumnType"></el-switch>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据...
      ],
      isVertical: false, // 初始状态为非垂直
    };
  },
  methods: {
    toggleColumnType() {
      this.isVertical = !this.isVertical;
    }
  }
};
</script>

在这个例子中，当你切换开关时，`isVertical`变量会被更新，进而改变`el-table-column`的`type`值，使得该列以垂直方向显示。请注意，不是所有的UI库都支持完全的垂直表格布局，某些元素可能不会按照预期排列。