element ui表头合并（单行表头合并）

element ui表头合并

• 官方文档给出的表头合并，是多行表头的。就是合并的表头下面一行，还有表头。所以只用官方文档的代码，《el-table-column》嵌套《el-table-column》，不符合我的需求。
• 我的需求原型如下：

如果用官方介绍的，列嵌套列布局的方法，变成了这样，多出了一行表头：

按官方列嵌套列的具体代码如下：

<el-table-column align="center" label="复仇者联盟电影票">
   <el-table-column>
     <template>
       <el-input
         class="input-width"
         v-model="addSessionForm.price1"
       ></el-input>
     </template>
   </el-table-column>
   <el-table-column>
     <template>
       <el-input
         class="input-width"
         v-model="addSessionForm.price2"
       ></el-input>
     </template>
   </el-table-column>
 </el-table-column>
 <el-table-column align="center" label="复仇者联盟电影票（窗口）">
   <el-table-column>
     <template>
       <el-input
         class="input-width"
         v-model="addSessionForm.price3"
       ></el-input>
     </template>
   </el-table-column>
   <el-table-column>
     <template>
       <el-input
         class="input-width"
         v-model="addSessionForm.price4"
       ></el-input>
     </template>
   </el-table-column>
 </el-table-column>

解决办法：

• 设置table的headerStyle

代码如下：

<el-table
    :data="addSessionTable"
    :header-cell-style="headerStyle"
    border
  >
  ......
  
  // 然后列的布局代码
  <el-table-column align="center" label="复仇者联盟电影票">
    <template>
      <el-input
        class="input-width"
        v-model="addSessionForm.price1"
      ></el-input>
    </template>
  </el-table-column>
  <el-table-column>
    <template>
      <el-input
        class="input-width"
        v-model="addSessionForm.price2"
      ></el-input>
    </template>
  </el-table-column>
  <el-table-column align="center" label="复仇者联盟电影票(窗口)">
    <template>
      <el-input
        class="input-width"
        v-model="addSessionForm.price3"
      ></el-input>
    </template>
  </el-table-column>
  <el-table-column>
    <template>
      <el-input
        class="input-width"
        v-model="addSessionForm.price4"
      ></el-input>
    </template>
  </el-table-column>

// headerStyle方法：
headerStyle({ row, columnIndex }) {
   row[3].colSpan = 2;
   row[4].colSpan = 0;
   if (columnIndex == 4 || columnIndex == 6) {
     return { display: "none" };
   }
   row[5].colSpan = 2;
   row[6].colSpan = 0;
 }

总结

• 单行表头的合并，不是用管方的列子，列嵌套列。而是正常布局后，配置table的headerStyle，因为headerStyle会返回每行每列的数据，自己控制哪行行列合并就好啦