el-table 表头竖向排列实现 升级版

 

  <div v-for="(item, index) in allItems" :key="index" class="mb20">
        <div class="arrangeTitle mb10 mt10">
          <headLine>
            <div class="title">
              <div class="fb cor3" style="font-size: 20px">
                {{ item.itemName }}
              </div>
            </div>
          </headLine>
        </div>
        <div class="mt10 mb10"></div>

        <!-- 系统外 -->
        <div class="my-self-table">
          <el-table v-if="false" :data="item.evaluatorDtos" border>
            <el-table-column
              prop="evaluaterName"
              label="评价导入人"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="appointmentTypeName"
              label="职位"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="gradeStatusDesc"
              label="评价进度"
              align="center"
            >
            </el-table-column>
          </el-table>
          <div v-if="item.evaluatorDtos && item.evaluatorDtos.length > 0">
            <!-- tableData
              :data="getValuesNew(item.evaluatorDtos)" -->
            <el-table
              style="width: 100%"
              :data="getValuesNew(item.evaluatorDtos)"
              :show-header="false"
              :cell-style="cellStyle"
              border
            >
              <el-table-column
                v-for="(item, index) in getHeadersNew(item.evaluatorDtos)"
                :key="index"
                :prop="item"
                min-width="150"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

     allItems: [],
      headers: [
        {
          prop: 'appointmentTypeName',
          // propObj: 'objName',
          label: '先进企业',
        },
        {
          prop: 'gradeStatusDesc',
          label: '进步企业',
        },

      ],

  computed: {

    getHeadersNew () {
      return newTable => {
        return newTable.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
      }
    },
    getValuesNew () {

      return newTable => {
        console.log(this.headers)
        console.log(newTable)
        return this.headers.map(item => {
          console.log(item)
          let tableEnd = newTable.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: item.propObj ? cur[item.prop][item.propObj] : cur[item.prop] }), { 'title': item.label, });
          return tableEnd
        });
      }

    }
  },

this.allItems = [
        {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼1",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "二般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼2",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }, {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测2",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }, {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测2",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }
      ]