【vue】Element UI实现表格表头纵向显示

element实现表格表头纵向显示 我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的。那么我们的需求有时候会要求行列转换,那么来看看咋整吧....(想起了当年的python作业...虽说整出来后觉得简单,但做的时候还是浪费了很多时间,好在开源yyds,找到了解决办法。)

下面参考来自:http://www.manongjc.com/detail/18-mjmvpumszjdxfut.html

🌰展示效果

<template>
    <div class="m50">

        <el-table border style="margin-top: 50px;" :data="originData">
            <el-table-column label="题型" property="type" align="center">
            </el-table-column>
            <el-table-column label="数量" property="num" align="center">
            </el-table-column>
            <el-table-column label="均分" property="average" align="center">
            </el-table-column>
        </el-table>

        <!-- 转化后 -->
        <el-table border style="margin-top: 50px;" :data="transData">
            <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
                <template slot-scope="scope">
                    {{scope.row[index]}}
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
                // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
                originData: [{
                        type: '选择题',
                        num: '5题',
                        average: '3分/题',
                    },
                    {
                        type: '填空题',
                        num: '5题',
                        average: '3分/题',
                    },
                    {
                        type: '选择题',
                        num: '2题',
                        average: '10分/题',
                    }
                ],
                originTitle: ['题型', '数量', '均分'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
                transTitle: ['', '学生1', '学生2', '学生3'], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
                transData: []
            }
        },
        created() {
            // 数组按矩阵思路, 变成转置矩阵
            let matrixData = this.originData.map((row) => {
                let arr = []
                for (let key in row) {
                    arr.push(row[key])
                }
                return arr
            })
            console.log(matrixData)
            // 加入标题拼接最终的数据
            this.transData = matrixData[0].map((col, i) => {
                return [this.originTitle[i], ...matrixData.map((row) => {
                    return row[i]
                })]
            })
            console.log(this.transData)
        }
    }
</script>

估计到这,你们也就知道怎么弄了....


下面是结合我自身的项目的总结🎯

项目中的数据是通过接口来的,那么其实和上面的🌰页差不多,就是替换下数据。但是后端传给我的借口里面还有列的名字,因此需要做一点小改动。

接口处理如下:

    getTotal() {
      this.$axios
        .get(`${CUSTOMER_URL}/api/statistics/question/inventory`)
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data.questionInventoryVOList.map(item => {
              return item;   //这里返回所有数据
            });
            let arr = res.data.data.questionInventoryVOList.map(item => {
                 return item.questionCategory;   //这里返回列的名字
            }); 
            this.transTitle = [
              '',
              ...arr
            ]
            this.afterGetData() //此处调用方法
          } else {
            this.$message.error(res.error);
          }
        })
        .catch(error => {
          if (error.res.data) {
            this.$message.error(error.res.data.error);
          }
        });
    }
    //加入数据
    if(matrixData.length>0){
      this.transData = matrixData[0].map((col, i) => {
        return [
            this.originTitle[i],
          ...matrixData.map(row => {
            return row[i+1];  //因为数据多出一行,需要从索引1开始
          })
        ];
      });
      this.transData.pop() //删掉多余行
    }
  <el-table
        border
        style="margin-top: 50px;"
        :header-cell-style="{ background: '#F5F5F5' }"
        :data="transData"        // 放数据
      >
        <el-table-column
          v-for="(item, index) in transTitle"        //放列名
          :label="item"
          :key="index"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row[index] }}
          </template>
        </el-table-column>
  </el-table>
### Element UI 表格组件中表头纵向显示的方法 为了使 `Element UI` 的表格组件 (`<el-table>`) 中的表头能够纵向显示,可以通过调整 `<el-table>` 和 `<el-table-column>` 组件来实现这一功能。一种方法是在模板内通过自定义渲染函数改变默认布局。 对于需要将原本横向排列的表头改为竖向的情况,可以利用 Vue.js 结合 CSS 来完成此操作。下面是一个具体的例子: ```html <!-- HTML部分 --> <template> <div> <!-- 使用v-if控制表格重绘以适应数据变化 --> <el-table class="vertical-header-table" v-if="perf_yearly.length > 0" :data="perf_yearly"> <!-- 动态创建首列用于展示属性名称 --> <el-table-column width="80"> <template slot-scope="scope">{{ perf_yearlyColumnList[scope.$index] }}</template> </el-table-column> <!-- 循环生成剩余各年的数据列为常规列项 --> <el-table-column v-for="(year, index) in yearList" :key="index" :label="year" align="center"> <template slot-scope="scope">{{ scope.row[year] }}</template> </el-table-column> </el-table> </div> </template> ``` 在这个实例里,`perf_yearly` 是包含每年度性能指标的对象数组,而 `perf_yearlyColumnList` 则保存着这些对象键名组成的列表,用来作为最左边一栏的内容[^4]。此外,还有一组表示不同年份的字符串集合 `yearList` 被遍历用作其他列的标题。 为了让上述代码正常工作并达到预期的效果,还需要配合一些样式上的处理,比如设置 `.vertical-header-table th .cell { writing-mode: vertical-lr; }` 这样的CSS规则让单元格内的文字垂直书写[^1]。 另外,在某些场景下可能只需要简单的旋转文本而不必完全重构表格结构,则可以直接应用 CSS 变换如 transform 属性到特定元素上来快速达成目的[^2]。 最后值得注意的是,当不需要顶部水平方向的传统表头时,可通过设置 `:show-header="false"` 参数将其隐藏起来[^5]。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值