elementUI 生成无限级多级表头

 

创建组件  TableColumn.vue

<template>
    <el-table-column   align="center" :key="Math.random()"
                       :prop="item.prop"
                       :label="item.label"
    >
      <template v-for="(value,index) in item.childs"  v-if="item.childs && item.childs.length>0">
        <table-column :item="value" >

        </table-column>
      </template>

    </el-table-column>

</template>

<script>

export default {
  name:"TableColumn",
  data(){
    return {

    }
  },
  props:{
    item:{
      default:{},
      type: Object
    }
  },
  created() {
    console.log(this.item,"===item==")
  }
}
</script>

注意：el-table-column  中 :key="Math.random()"  防止表头错乱

el-table-column 中间不要掺杂 div标签 ，否则顺序会乱

引用组件 

  <el-table
          :data="tableData"  :span-method="arraySpanMethod" border 
          style="width: 100%">
          
          <template v-for="(item,index) in titles" >
            <table-column :item="item" >
            </table-column>
          </template>
          
        </el-table>

 arraySpanMethod：自定义的处理合并信息的方法

 methods:{
      /* 表格合并 */
      arraySpanMethod({ row, column, rowIndex, columnIndex }){
        const merge = row.merge;
        return [merge[columnIndex].num,1]    //[列，行]
      },
    }

如下是用到的表头数据及列表数据：titles tableData

后端返回的表格数据肯定形式各异，反正不是这种结构，所以更多时候是需要我们自己用js再处理。这里只是列出了我处理后的最终数据格式。

对于 合并数据merge 属性值，也是处理后的最中结果

titles:[
        {
        "id": 20,
        "childs": [{
          "id": 22,
          "childs": null,
          "prop": "prop22",  // 列字段
          "label": "B"    // 列名称
        }, {
          "id": 21,
          "childs": null,
          "prop": "prop21",
          "label": "A"
        }],
        "materialBasicIndexValues": null,
        "prop": "prop20",
        "label": "指标一"
      }, {
        "id": 23,
        "childs": [{
          "id": 24,
          "childs": null,
          "prop": "prop24",
          "label": "A"
        }, {
          "id": 25,
          "childs": null,
          "prop": "prop25",
          "label": "B"
        }],
        "materialBasicIndexValues": null,
        "prop": "prop23",
        "label": "指标二"
      }, {
        "id": 26,
        "childs": [{
          "id": 27,
          "childs": null,
          "prop": "prop27",
          "label": "A"
        }, {
          "id": 28,
          "childs": null,
          "prop": "prop28",
          "label": "B"
        }, {
          "id": 29,
          "childs": [{
            "id": 30,
            "childs": null,
            "prop": "prop30",
            "label": "a"
          }, {
            "id": 31,
            "childs": null,
            "prop": "prop31",
            "label": "b"
          }],
          "materialBasicIndexValues": null,
          "prop": "prop29",
          "label": "C"
        }],
        "materialBasicIndexValues": null,
        "prop": "prop26",
        "label": "指标三"
      }]

 

 tableData:[
        {
        "prop22": "qqq",
        "prop21": "aaa",
        "prop24": "3",
        "prop25": "4",
        "prop27": "5",
        "prop28": "6",
        "prop30": "7",
        "prop31": "8",
          /*  合并数据 */
        "merge": [{
          "column": 0,  // 列的序号
          "num": 1    // 合并数量 ，num：1 相当于没合并
        }, {
          "column": 1,
          "num": 1
        }, {
          "column": 2,
          "num": 4
        }, {
          "column": 3,
          "num": 4
        }, {
          "column": 4,
          "num": 4
        }, {
          "column": 5,
          "num": 4
        }, {
          "column": 6,
          "num": 4
        }, {
          "column": 7,
          "num": 4
        }]
      }, {
        "prop22": "www",
        "prop21": "bbb",
        "prop24": "",
        "prop25": "",
        "prop27": "",
        "prop28": "",
        "prop30": "",
        "prop31": "",
        "merge": [{
          "column": 0,
          "num": 1
        }, {
          "column": 1,
          "num": 1
        }, {
          "column": 2,
          "num": 0
        }, {
          "column": 3,
          "num": 0
        }, {
          "column": 4,
          "num": 0
        }, {
          "column": 5,
          "num": 0
        }, {
          "column": 6,
          "num": 0
        }, {
          "column": 7,
          "num": 0
        }]
      }, {
        "prop22": "eee",
        "prop21": "ccc",
        "prop24": "",
        "prop25": "",
        "prop27": "",
        "prop28": "",
        "prop30": "",
        "prop31": "",
        "merge": [{
          "column": 0,
          "num": 1
        }, {
          "column": 1,
          "num": 1
        }, {
          "column": 2,
          "num": 0
        }, {
          "column": 3,
          "num": 0
        }, {
          "column": 4,
          "num": 0
        }, {
          "column": 5,
          "num": 0
        }, {
          "column": 6,
          "num": 0
        }, {
          "column": 7,
          "num": 0
        }]
      }, {
        "prop22": "fff",
        "prop21": "ddd",
        "prop24": "",
        "prop25": "",
        "prop27": "",
        "prop28": "",
        "prop30": "",
        "prop31": "",
        "merge": [{
          "column": 0,
          "num": 1
        }, {
          "column": 1,
          "num": 1
        }, {
          "column": 2,
          "num": 0
        }, {
          "column": 3,
          "num": 0
        }, {
          "column": 4,
          "num": 0
        }, {
          "column": 5,
          "num": 0
        }, {
          "column": 6,
          "num": 0
        }, {
          "column": 7,
          "num": 0
        }]
      }
      ],