elementUI 表格的表头如何为两个一组?

Question

如图所示， 10kg 那里。在这谢过了。~~~~ 实在不行准备用原声撸了

Answer 1

用template可以实现，主要就是在el-table-column下放个<template scope="scope">，在template里面做循环，取值的话通过scope取值，这个不好说的，自己看代码吧

<el-table   :data="tableData1" border style="width: 100%">    
                                <el-table-column width='400'  label="需求客户名称"  >
                                    <template scope="scope">
                                           <p v-show="scope.row.show">{{scope.row.name}}</p><el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-show="!scope.row.show" v-model="scope.row.name"></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(tableData1,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(tableData1,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,tableData1)"  type="danger" size="small">
                                              删除
                                            </el-button>
                                          <el-button  @click.native.prevent="editRow(scope.$index,tableData1,1)"  type="primary" size="small">
                                              编辑
                                           </el-button>                                        
                                            <el-button  @click.native.prevent="keep(scope.$index,tableData1,1)"  type="success" size="small">
                                              保存
                                            </el-button>
                                      </template>
                               </el-table-column>                               
                          </el-table>