结果如图：

区域，成功率，清单率为表头，右侧为动态的数据

 废话不多说直接上代码：

1.先声明表格，使用框架自带a-table，核心点就在data和columns上

 <div style="margin-bottom: 60px;"><a-table style="width: 100%" :data-source="getValues()" :columns="areaHeader" :showHeader="false":pagination="false" :rowKey="(record,index)=>{return index}"></a-table></div>

2. 设置表头columns：

//mock 数据  之后这个数据要来自后台tableData: [{area: '上海',success: '86',detail: '85'},{area: '浙江',success: '85',detail: '90'},{area: '内蒙古',success: '65',detail: '90'},{area: '北京',success: '35',detail: '70'}],//转换表头的一个方法 getHeaders () {let data = this.tableData.reduce((pre, cur, index) => pre.concat({ 'dataIndex': `value${index}` }), [{ 'dataIndex': 'title' }])console.log('headers===>', data)this.areaHeader = data},

然后绑定数据即可：

//左侧定义好的表头
headers: [{prop: 'area',label: '区域'},{prop: 'success',label: '成功率(%)'},{prop: 'detail',label: '清单率(%)'}],getValues () {let data = this.headers.map(item => {return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label })})console.log('value===>', data)return data},