ant-design-vue 实现表格表头纵排列

结果如图：

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

 废话不多说直接上代码：

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