vue elementui 实现table一格多项内容

el-table某字段一行多项内容，实现效果如下图

代码如下

<el-table
      :header-cell-style="{ 'background-color': '#f0f3fa', color: '#666666' }"
      height="calc(100% - 50px)"
      :data="tableData"
      highlight-current-row
      @row-click="selectRow"
      @row-dblclick="dbclick"
      @row-contextmenu="clickright"
      @cell-dblclick="bccelldblclick"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <template v-for="(item, index) in tableList">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          :key="index"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <template v-if="item.prop === 'BianHao'">
              <div v-if="row.BianHao">{{ row.BianHao }}</div>
              <div v-if="row.BianHao2">{{ row.BianHao2 }}</div>
            </template>
            <template v-else>
              {{ row[item.prop] || "-" }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>

思路：序号固定，所以独立一列el-table-column。其余的在template里在写一列el-table-column，在再他里面使用插槽获取slot-scope获取本行数据，判断如果有这个字段时，里面是什么内容，否则又是什么