使用elementui的table动态生成表头

正常的数据是这样的

写死的table

但是目前的需求是要根据数据来生成表格的那一列并且对于的lable也是动态生成的 ，原型如图所示

!

红色的表示数据是动态生成

数据处理代码如下

                                const tableHead = [];
                                element.costInfos.forEach((costInfo, index) => {
                                    element['costInfos' + index] = costInfo.ruleSmallFee;
                                    costInfo.name = costInfo.weightMin + '~' + costInfo.weightMax;
                                    //这里是根据数据循环得到的动态的表头
                                    tableHead.push({ label: costInfo.name, property: `costInfos${index}` }); // 动态表头
                                });
                                // 这里是固定的表头，如果没有可不写
                                const anotherTableHead = [
                                    {
                                        label: '物流公司',
                                        property: 'expressName'
                                    },
                                    {
                                        label: '配送地区',
                                        property: 'areaName'
                                    }
                                ];
                                // 合并2部分的表头
                                this.tableHead = [...anotherTableHead, ...tableHead]; // 表头信息

最重要的Html部分

通过scope.row[scope.column.property]取到当前行的列字段,这里是基于elementui的table实现的所以那部分必须要比较熟悉，参考文章地址 https://blog.csdn.net/sinat_25295611/article/details/82748242