el-table实现表头内容换行显示+el-table行列变动问题

场景：
要求实现table表头内容换行显示，
修改了个bug: 页面进来时，这两列顺序会变 如下图：
前言：
使用:render-header="renderheader"在需要换行的地方使用 /
使用:key="Math.random()"可解决顺序问题

代码如下：
template:

<el-table
        :data="tableList.tableData"
        stripe
        style="width: 100%; font-size: 14px"
      >
        <el-table-column
          label="心得指标/已完成人数"
          prop="learnedCompleteCount"
          align="center"
          :render-header="renderheader"
          :key="Math.random()"
        ></el-table-column>
        <el-table-column
          label="心得指标/未完成人数"
          prop="learnedInCompleteCount"
          align="center"
          :render-header="renderheader"
          :key="Math.random()"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
            <el-button type="text" @click="download(scope.row)">导出</el-button>
          </template>
        </el-table-column>
      </el-table>

methods:

 //实现table表头换行显示
    renderheader(h, { column, $index }) {
      return h('span', {}, [
        h('span', {}, column.label.split('/')[0]),
        h('br'),
        h('span', {}, column.label.split('/')[1])
      ]);
    },