table表格-多级表头

た入场券 2022-03-18 07:16 1384阅读 0赞

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

层级分析：第一列日期；第二列配送信息

配送信息列：嵌套姓名2列；嵌套地址三列

地址列：嵌套省份3列、市区4列、地址5列、邮编6列

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="日期"
            prop="date"
            width="150">
          </el-table-column>
    
          <el-table-column label="配送信息">
            <el-table-column
              label="姓名"
              prop="name"
              width="120">
            </el-table-column>
    
            <el-table-column label="地址">
              <el-table-column
                label="省份"
                prop="province"
                width="120">
              </el-table-column>
              <el-table-column
                label="市区"
                prop="city"
                width="120">
              </el-table-column>
              <el-table-column
                label="地址"
                prop="address"
                width="300">
              </el-table-column>
              <el-table-column
                label="邮编"
                prop="zip"
                width="120">
              </el-table-column>
            </el-table-column>
    
          </el-table-column>
        </el-table>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            tableData: [
              {
                date: '2016-05-03',
                name: '王大虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
              },
              {
                date: '2016-05-02',
                name: '王二虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
              },
              {
                date: '2016-05-01',
                name: '王三虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
              }
            ]
          }
        }
      })
    </script>

**情景：banner位置个数不固定**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1][]

tableData从后台获取，构造成这样的格式

![20190223191856601.png][]

rankTabs构造成这样的格式，可实现prop属性与tableData对应

![20190223192026916.png][]

<el-table
          v-loading="listLoading"
          :data="tableData"
          style="margin-top: 15px">
          <el-table-column fixed prop="time" label="日期\位置" align="center" width="120"/>
          <el-table-column label="汇总" align="center" width="120px">
            <el-table-column label="总点击数" prop="click_num" width="100" align="center">
            </el-table-column>
            <el-table-column label="总点击人数" prop="click_user_num" width="100" align="center">
            </el-table-column>
          </el-table-column>
    
          <el-table-column v-for="(item, index) in rankTabs" :label="item.rank" align="center" width="120px" :key="index">
            <el-table-column label="总点击数" :prop="item.position_rank + 'click_num'" width="100" align="center">
            </el-table-column>
            <el-table-column label="总点击人数" :prop="item.position_rank + 'click_user_num'" width="100" align="center">
            </el-table-column>
          </el-table-column>
    
        </el-table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220318/23e3dca80bd04a2f9406187f5f0a2359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220318/c1f00fc13fdb48ccaa8e63e47aef4698.png
[20190223191856601.png]: /images/20220318/deb28ad0e82b46bab4af699d76476456.png
[20190223192026916.png]: /images/20220318/4c315d32ac334bb78af870ce464201ac.png