vue element-ui动态生成table表头和数据

1、template

<div>

                    <el-table

                    :data="listData"

                    style="width: 100%"

                    >

                    <el-table-column

                            v-for="(item, index) in listLabel"

                            :key="index"

                            :prop="item.prop"

                            :label="item.label"

                            >

                    </el-table-column>

                </el-table>

        </div>

2、script

// 表格数据

        listData: [

                    {

                        admin: 1,

                        name: '23',

                        carRewardId: '34',

                        carFundProvider: '34',

                        carFrameNo: '354',

                        carNo: '534',

                        acreage: '93450',

                        assetsType: '44344',

                        incomePrice: '34',

                        rewardStatus: '23',

                        addTime: '23',

                        addManagerName: '23',

                    },

                    {

                        admin: 2,

                        name: '343',

                        carRewardId: '78',

                        carFundProvider: '34',

                        carFrameNo: '78',

                        carNo: '78',

                        acreage: '756',

                        assetsType: '354',

                        incomePrice: '34534',

                        rewardStatus: '23',

                        addTime: '23',

                        addManagerName: '23',

                    }

                ],

                //  表头数据

          listLabel: [

                    {label: '车牌号', prop: 'admin'},

                    {label: '名称', prop: 'name'},

                    {label: '值', 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'},

                ]

效果图片：

中国加油，武汉加油!