element ui表头合并问题

Question

element table链接

如图， element ui table组件给的合并表头是类似这种的，只有上方的表头可以合并。我想知道如果需要左侧也需要合并（如下图）改如何修改呢？请各位赐教。

Answer 1

我使用的elementUI版本是2.3.2，查看文档，使用表格的 header-cell-style 属性，通过传参使用 css display 控制你需要隐藏或者显示的表格即可，用我的代码举例，我需要实现的效果是这样的

代码构造如下

<el-table-column align="center" label="分销订货起订量">
    <el-table-column align="center" label="货量区间">
    
        <el-table-column align="center"    label="hide1"    width="200px">
            <template slot-scope="scope"> <span>{{ vvv }}</span> </template>
        </el-table-column>
        
        <el-table-column align="center"    label="hide2"    width="40px">
            <template slot-scope="scope"> <span>至</span> </template>
        </el-table-column>
        
        <el-table-column align="center"    label="hide3"    width="200px">
            <template slot-scope="scope">
                <el-input v-model.trim="ddd" style="width: 160px"></el-input>
            </template>
        </el-table-column>    
        
    </el-table-column>
</el-table-column>

上面的hide1、hide2、hide3是我用来形成表格布局的，往 header-cell-style 属性传入以下函数

<el-table
   border
   :data="...."
   :header-cell-style="discountHeaderStyle1"
   class="...."
   style="....">

function discountHeaderStyle1({ row, column, rowIndex, columnIndex }) {
  if (rowIndex == 3) {
    return { display: 'none' }
  }
}

即可实现所需效果

类似需求我认为基本可以用这种方法实现。

Answer 2

最新的提供了合并样式element，

  <el-table :data="tableData2" border style="width: 100%">                                                                               
                                  <el-table-column width='400'  label="产出要素性质">
                                      <template scope="scope">
                                           <p v-show="scope.row.show">{{scope.row.nature}}</p><el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-show="!scope.row.show" v-model="scope.row.nature"></el-input>
                                        </template>
                                  </el-table-column>
                                 <el-table-column  label="具体产出">
                                     <template scope="scope">
                                        <div class="content-rowspan">
                                            <div v-for="(list,index) in scope.row.lists"><p v-show="scope.row.show">{{list}}<el-button  class="delelist" type="danger" size="small"  @click="delelist(tableData2,scope.$index,index)">删除</el-button></p><el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-show="!scope.row.show" v-model="scope.row.lists[index]"></el-input></div>            
                                            <div><el-button  size="small" type="primary" icon="plus" @click="addlist(tableData2,scope.$index)"></el-button></div>
                                        </div>
                                        </template>
                                    </el-table-column>
                                 <el-table-column width='200' label="操作">
                                      <template scope="scope">                                          
                                          <el-button  @click.native.prevent="deleteRow(scope.$index,tableData2)" type="danger" size="small">
                                              删除
                                            </el-button>
                                            <el-button  @click.native.prevent="editRow(scope.$index,tableData2)"  type="primary" size="small">
                                              编辑
                                            </el-button>
                                            <el-button  @click.native.prevent="keep(scope.$index,tableData2,2)"  type="success" size="small">
                                              保存
                                            </el-button>
                                      </template>                               
                            </el-table-column>
                          </el-table>