VUE(Element-ui)开发使用Table合并单元格

在使用Element-ui进行开发时,遇到使用表格进行展示时,需要进行进行单元的合并,实现如下效果:

官网的例子中实现单元格合并,需要2步

• 提供的数据不能为嵌套数据格式,如:

  [{id:"1",name:"王小虎"},{id:"2",name:"王小虎"}]

• 提供:span-method方法,实现colspan和rowspan的效果

但是由于后端接口提供的数据一般为嵌套格式,如:

[
    {
        "id": "123123123",
         "name": [
                {
                    "vendor": "Huawei",
                    "type": "vUGW"
                },
                {
                    "vendor": "Huawei",
                    "type": "EPSN"
                }
            ],
            "notificationuri": " https://ip:port/v1/catalog/notification"
        }
]

这样就需要在前端循环修改数据格式,拼成table需要的格式,或者修改后端服务接口,实现起来比较麻烦.所以决定使用template+v-for来手动实现.实现思路如下:

• 使用v-for进行嵌套循环,同时根据内层数据的length设置rowspan
• 表格使用element-ui的表格样式

最终伪代码如下:

<template>
      <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition">
        <div class="el-table__header-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%">
            <thead class="has-gutter">
              <tr>
                <th class="is-leaf"><div class="cell">xxxx</div></th>
                <th class="is-leaf"><div class="cell">xxxx</div></th>
                <th class="is-leaf"><div class="cell">xxxx</div></th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:100%">
            <tbody v-for="row in list" :key="row.id">
              <tr v-for="(f,index) in row.filter" :key="index" class="el-table__row">
                <td v-if="index==0" :rowspan="row.filter.length"><div class="cell">{{ row.notificationuri}}</div></td>
                <td><div class="cell">{{f.vendor}}</div></td>
                <td><div class="cell">{{f.type}}</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
</template>
<style scoped>
@import '~element-ui/lib/theme-chalk/index.css';
</style>