marlsun 2022-08-28 13:28 采纳率: 84.2%
浏览 126
已结题

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

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

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

如下附图所示:

img


<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>

盼得到指教,谢谢!

  • 写回答

3条回答 默认 最新

  • ZionHH 2022-08-29 09:48
    关注

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

    img

    <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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月8日
  • 已采纳回答 8月31日
  • 赞助了问题酬金20元 8月28日
  • 修改了问题 8月28日
  • 展开全部

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?