技術標籤：elementUIelementui

場景：
要求實現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])
      ]);
    },