elementUI的el-table横向展示

最新推荐文章于 2024-05-16 03:05:12 发布

风掠过有空白

最新推荐文章于 2024-05-16 03:05:12 发布

阅读量3.6k

点赞数 2

分类专栏：封装组件工作遇到的问题文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_44056717/article/details/128902066

版权

工作遇到的问题同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

封装组件

17 篇文章 0 订阅

订阅专栏

elementUI的el-table横向展示，表头根据数据变化。

图示：在这里插入图片描述
代码:

   <el-table
        :data="tableData"
        height="3.8rem"
        ref="table"
        border>
      <el-table-column
          v-for="(item,index) in tableHead"
          :prop="item.inventoryQtyByTon"
          :key="index"
          :width="tableHead.length>5?200:''"
          :label="item.lspzName">
      </el-table-column>
    </el-table>

 tableData: [],
 tableHead: [],

           let list=[{
              inventoryQtyByTon:100,
              lspzName:'物料1'
            },{
              inventoryQtyByTon:200,
              lspzName:'物料2'
            },{
              inventoryQtyByTon:300,
              lspzName:'物料3'
            },{
              inventoryQtyByTon:400,
              lspzName:'物料4'
            },{
              inventoryQtyByTon:500,
              lspzName:'物料5'
            },{
              inventoryQtyByTon:600,
              lspzName:'物料6'
            }]
            this.getCrosswise(list)

    //横向表格数据
    getCrosswise(list){
      let dataObj = {}
      list.map((e,index)=>{
        dataObj['inventoryQtyByTon' + index] = e.inventoryQtyByTon
        this.tableHead.push({
          lspzName:e.lspzName,
          inventoryQtyByTon:'inventoryQtyByTon' + index
        })
      })
      this.tableData.push(dataObj)
    },