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

element-ui table 表頭合并

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

clipboard.png

  <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="總量(m3)" width="120" align='center'>
      </el-table-column>
      <el-table-column prop="name" label="單方含量(m3/㎡)" width="120" align='center'>
      </el-table-column>
    </el-table-column>
  </el-table>
        tableData: [{
    date: '現(xiàn)澆砼',
    name1: '基礎(chǔ)',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '現(xiàn)澆砼',
    name1: '墻',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '現(xiàn)澆砼',
    name1: '柱',
    zongliang: '1',
    name: '王小虎',
  }, {
    date: '現(xiàn)澆砼',
    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，獲取不到表頭的 如何修改
回答
編輯回答
大濕胸

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

2017年2月24日 02:44
編輯回答
影魅

和你一個項目的合并方法不一樣嗎？

2017年3月10日 12:17
編輯回答
兔囡囡

圖片描述

圖片描述

圖片描述

2018年3月8日 08:03
編輯回答
不二心

我也遇到這樣的問題結(jié)果用CSS結(jié)合slot解決了
dom部分
<!--分界線-->

            <el-table-column label="業(yè)務(wù)能力" 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;
            }
        }

結(jié)果：圖片描述

2017年11月25日 16:38