elementUI的el-table横向展示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)