VUE element-ui之table表格遍历渲染
步骤:定义模板:<el-table-columnv-for="(item, index) in tableList":key="index":prop="item.prop":label="item.label":show-overflow-tooltip="true"//文字过多隐藏/>定义表头:data() {return{tableList: [{ prop: 'unit_pri
·
步骤:
定义模板:
<el-table-column
v-for="(item, index) in tableList"
:key="index"
:prop="item.prop"
:label="item.label"
:formatter="format"
:show-overflow-tooltip="true"//文字过多隐藏
/>
定义表头:
data() {
return{
tableList: [
{ prop: 'unit_price', label: '单价',
format: (row) => {
return row.purchaseStatus === 0 ? '未审核' :row.purchaseStatus === 1 ? '已审核': row.purchaseStatus === 2 ? '不通过' : row.purchaseStatus === 3 ? '审核中' : '已完成'
}},
{ prop: 'number', label: '数量' },
{ prop: 'amount', label: '金额' },
{ prop: 'create_time', label: '制单时间' }
]
}
}
遍历渲染表格,提高代码质量。
更多推荐
已为社区贡献32条内容
所有评论(0)