el-table-column实现多级表头+多级表格

最新推荐文章于 2024-05-29 18:32:38 发布

weixin_51755740

最新推荐文章于 2024-05-29 18:32:38 发布

阅读量916

点赞数 14

分类专栏： Element 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_51755740/article/details/135104047

版权

Element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：

数据格式：

html部分：

   <!-- tableData为返回数据的data的rows的数据 --> 
<el-table
      :data="tableData"  
      row-key="id"
      stripe
      border
      header-cell-class-name="headercell"
      cell-class-name="cellclazz"
      class="app-table"
     >
      <el-table-column 
        sortable
        prop="serverport" 
        label="进程端口号" 
        show-overflow-tooltip/>
      <el-table-column 
        sortable
        prop="status" 
        label="进程状态" 
        show-overflow-tooltip/>
      <el-table-column label="邻居详细">
        <el-table-column
          prop="bgppeers"
          label="路由器IP">
            <template slot-scope="scope">
                <div class="title" v-for="(item,index) in scope.row.bgppeers.filter(item=>item.routerip)" :key="index" :style="    {'border-bottom': index === scope.row.bgppeers.length - 1 ? 'none' : '1px solid #ccc' }">
                <el-tooltip class="item" effect="dark" :content="item.routerip" placement="top-start">
                  <div class="item">{{ item.routerip }}</div>
                  </el-tooltip>
                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="bgppeers"
          label="路由器名称">
            <template slot-scope="scope">
                <div class="title" v-for="(item,index) in scope.row.bgppeers.filter(item=>item.routername)" :key="index" :style="    {'border-bottom': index === scope.row.bgppeers.length - 1 ? 'none' : '1px solid #ccc' }">
                <el-tooltip class="item" effect="dark" :content="item.routername" placement="top-start">
                  <div class="item">{{ item.routername }}</div>
                  </el-tooltip>
                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="bgppeers"
          label="路由器AS号">
            <template slot-scope="scope">
                <div class="title" v-for="(item,index) in scope.row.bgppeers.filter(item=>item.remoteas)" :key="index" :style="    {'border-bottom': index === scope.row.bgppeers.length - 1 ? 'none' : '1px solid #ccc' }">
                <el-tooltip class="item" effect="dark" :content="item.remoteas" placement="top-start">
                  <div class="item">{{ item.remoteas }}</div>
                  </el-tooltip>
                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="bgppeers"
          label="服务器AS号">
            <template slot-scope="scope">
                <div class="title" v-for="(item,index) in scope.row.bgppeers.filter(item=>item.localas)" :key="index" :style="    {'border-bottom': index === scope.row.bgppeers.length - 1 ? 'none' : '1px solid #ccc' }">
                <el-tooltip class="item" effect="dark" :content="item.localas" placement="top-start">
                  <div class="item">{{ item.localas }}</div>
                  </el-tooltip>
                </div>
            </template>
        </el-table-column>
      </el-table-column>
    </el-table>