鍍金池/ 問答/HTML/ element ui表頭合并問題

element ui表頭合并問題

element table鏈接

圖片描述

如圖， element ui table組件給的合并表頭是類似這種的，只有上方的表頭可以合并。我想知道如果需要左側(cè)也需要合并（如下圖）改如何修改呢？請(qǐng)各位賜教。

圖片描述

回答
編輯回答
蔚藍(lán)色

最新的提供了合并樣式element，圖片描述

  <el-table :data="tableData2" border style="width: 100%">                                                                               
                                  <el-table-column width='400'  label="產(chǎn)出要素性質(zhì)">
                                      <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="具體產(chǎn)出">
                                     <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>
2017年2月14日 02:33