element-ui table 表头合并

Question

vue + element-ui table
表头如何合并

  <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%" border>
    <el-table-column prop="date" label="需要合并 " width="180" align='center'>
    </el-table-column>
    <el-table-column prop="name1" label="需要合并" width="180" align='center'>
    </el-table-column>
    <el-table-column label="单体1" width="180 " align='center'>
      <el-table-column prop="zongliang" label="总量(m³)" width="120" align='center'>
      </el-table-column>
      <el-table-column prop="name" label="单方含量(m³/㎡)" width="120" align='center'>
      </el-table-column>
    </el-table-column>
  </el-table>
        tableData: [{
    date: '现浇砼',
    name1: '基础',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '现浇砼',
    name1: '墙',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '现浇砼',
    name1: '柱',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '现浇砼',
    name1: '梁板',
    zongliang: '1',
    name: '王小虎',
  }]
  
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
  console.log(rowIndex);
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
},
这个地方获取到的rowIndex 分别是0 1 2 4，获取不到表头的 如何修改

Answer 1

我也遇到这样的问题结果用CSS结合slot解决了
dom部分
<!--分界线-->

            <el-table-column label="业务能力" width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>

css部分
.el-table td {

            padding: 0px 0!important;
            .cell {
                line-height: 40px;
            }
            .cell span {
                border-right: 1px solid #ebeef5;
                padding: 10px 7px;
                width: 100px;
                display:inline-block;
            }
            .cell span:last-child{
                border: none;
            }
        }

结果：

Answer 2

element-ui里有合并单元格的
http://element-cn.eleme.io/#/...

Answer 3

和你一个项目的合并方法不一样吗？

Answer 4

图片描述

Answer 5

我有一个类似的骚操作:
就是写两个表格，上一个表格不展示tbody,列数一样，这样得保证列宽一样哈

<Table class="combine-table">
        <TableColumn  align="center" prop="school" label="学校"></TableColumn>
        <TableColumn  align="center" prop="count"></TableColumn>
        <TableColumn  align="center" prop="count" label="cpu"></TableColumn>
        <TableColumn  align="center" prop="count"></TableColumn>
        <TableColumn  align="center" prop="count"></TableColumn>
        <TableColumn  align="center" prop="count" label="内存"></TableColumn>
        <TableColumn  align="center" prop="count"></TableColumn>
         <TableColumn  align="center" prop="count"></TableColumn>
        <TableColumn  align="center" prop="count" label="根磁盘"></TableColumn>
        <TableColumn  align="center" prop="count"></TableColumn>
      </Table>
      <Table :data="warningList">
        <TableColumn  align="center" prop="school"></TableColumn>
        <TableColumn  align="center" prop="count" label="总核数"></TableColumn>
        <TableColumn  align="center" prop="count" label="空闲数"></TableColumn>
        <TableColumn  align="center" prop="count" label="使用率"></TableColumn>
        <TableColumn  align="center" prop="count" label="总空间"></TableColumn>
        <TableColumn  align="center" prop="count" label="空闲"></TableColumn>
        <TableColumn  align="center" prop="count" label="使用率"></TableColumn>
        <TableColumn  align="center" prop="count" label="总空间"></TableColumn>
        <TableColumn  align="center" prop="count" label="剩余"></TableColumn>
        <TableColumn  align="center" prop="count" label="使用率"></TableColumn>
      </Table>

style

.combine-table{
      .el-table__empty-block{
        display: none;
      }
    }

结果：