element表格默认只需要传递进去数据，然后写死表头即可渲染数据。在本次业务开发过程中表格需求较多，表头数据不是固定的，最终解决为把table表格封装，页面中引入同一个table即可，而table通过父组件传递数据来动态渲染。
子组件
:data="listData"
style="width: 100%"
:cell-style="cellStyle"
:header-row-class-name="headerClass"
fit>
v-for="(item, index) in listLabel"
:key="index"
:prop="item.prop"
:label="item.label">
export default {
props: {
listData: {
type: Array,
default: []
},
listLabel: {
type: Array,
default: () => {
return []
}
}
},
name: "san-table",
methods: {
// 表格头部样式
headerClass() {
return 'table-header-class'
},
// element列表文字居中
cellStyle () {
return 'text-align:center;line-height: 8px;'
},
}
}
父组件引用
// 局部引用
import djSanTable from '/components/dj-sanTable'
components: {
djSanTable
},
export default {
data() {
return {
// 表头数据(随意写的数据)
listLabel: [
{label: '车牌号', prop: 'carEntrustId'},
{label: '名称', prop: 'name'},
{label: '值', width: '', prop: 'carRewardId'},
{label: '价格', prop: 'carFundProvider'},
{label: '利润', prop: 'carFrameNo'},
{label: '大类', prop: 'carNo'},
{label: '小类', prop: 'acreage'},
{label: '有价格', prop: 'assetsType'},
{label: '极好价格', prop: 'incomePrice'},
{label: '优质价格', prop: 'rewardStatus'},
{label: '良好价格', prop: 'addTime'},
{label: '无价格', prop: 'addManagerName'},
],
// 表格数据 (随意写的数据)
tableData: [
{
carEntrustId: '1',
name: '23',
carRewardId: '34',
carFundProvider: '34',
carFrameNo: '354',
carNo: '534',
acreage: '93450',
assetsType: '44344',
incomePrice: '34',
rewardStatus: '23',
addTime: '23',
addManagerName: '23',
},
{
carEntrustId: '2',
name: '343',
carRewardId: '78',
carFundProvider: '34',
carFrameNo: '78',
carNo: '78',
acreage: '756',
assetsType: '354',
incomePrice: '34534',
rewardStatus: '23',
addTime: '23',
addManagerName: '23',
}
]
}
},
}
最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。
