elementUI的el-table横向展示

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

图示:elementUI的el-table横向展示_第1张图片
代码:

   <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)
    },

你可能感兴趣的:(封装组件,工作遇到的问题,elementui,vue.js,javascript)