element-plus 表格行列数过宽，自动分行

Question

本地数据共1000多条, 以 element-plus的table 呈现后，想要解决的问题是：

1. 点击数据展示按钮后，弹出table，但呈现的一行多列，远远超出了页面的宽度，只能横向拖动查看。
2. 想要实现：
   （1）固定每行的列数，根据列的总数来自动分行。
   （2）原来的第一列固定不变。

如下附图所示：

<template>
  <div>
    <el-button text @click="dialogVisible = true">查看数据</el-button>
    <el-dialog v-model="dialogVisible" width="70%">
      <el-table :data="gridData">
        <el-table-column property="item" label="Item" width="150" />
        <el-table-column property="t1" label="T1" width="150" />
        <el-table-column property="t2" label="T2" width="150" />
        <el-table-column property="t3" label="T3" width="150" />
        <el-table-column property="t4" label="T4" width="150" />
        <el-table-column property="t5" label="T5" width="150" />
        <el-table-column property="t6" label="T6" width="150" />
        <el-table-column property="t7" label="T7" width="150" />
        <el-table-column property="t8" label="T8" width="150" />
        <el-table-column property="t9" label="T9" width="150" />
        <el-table-column property="t10" label="T10" width="150" />
        <el-table-column property="t11" label="T11" width="150" />
        <el-table-column property="t12" label="T12" width="150" />
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

const dialogVisible = ref(false);

const gridData = ref([
  {
    item: "X",
    t1: "A",
    t2: "A",
    t3: "A",
    t4: "A",
    t5: "A",
    t6: "A",
    t7: "A",
    t8: "A",
    t9: "A",
    t10: "A",
    t11: "A",
    t12: "A",
  },
]);
</script>
<style scoped></style>

盼得到指教，谢谢！

Answer 1

表格可能不太好实现，下面用div粗略实现

<template>
  <div style="padding: 20px;">
    <div class="list">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="list-row">
        <div class="left">
          <div class="col-header">Item</div>
          <div class="col-cell">{{item.name}}</div>
        </div>
        <div class="right">
          <div
            v-for="(dItem, dIndex) in item.details"
            :key="dIndex"
            class="right-col">
            <div class="col-header">{{dItem.name}}</div>
            <div class="col-cell">{{dItem.val}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    const obj = {
      name: 'X',
      details: [
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' },
        { name: 'T1', val: 'A' }
      ]
    }
    for (let i = 0; i < 5; i++) {
      this.tableData.push(obj)
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.list {
  &-row {
    display: flex;
    .left {
      width: 120px;
      border: 1px solid #ccc;
      margin-top: -1px;
      .col-header {
        border-bottom: 1px solid #ccc;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      &-col {
        min-width: 120px;
        margin-top: -1px;
        .col-header {
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
        }
        .col-cell {
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    &:not(:last-of-type) .left {
      border-bottom: none;
    }
  }
}
</style>