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)
    },
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐