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'},

                ]

效果图片:


中国加油,武汉加油!
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容