el-table 表头竖向排列实现

发布时间 2023-03-25 15:34:24作者: ThisCall

 

<el-table
            style="width: 100%"
            :data="getValues"
            :show-header="false"
            :cell-style="cellStyle"
            border
          >
            <el-table-column
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
            >
            </el-table-column>
          </el-table>

 

  data () {
    return {


      headers: [
        {
          prop: 'date',
          label: '先进企业',
        },
        {
          prop: 'name',
          label: '进步企业',
        },

      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]

    };
  },
 computed: {
    getHeaders () {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues () {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, });
      });
    }
  },
   cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "background:#f5f7fa;text-align: center;";
      }
    },