vue+element实现多级表头加树结构

标题两种展示方式

方式一

在这里插入图片描述
完整代码:

<template>
  <div class="box">
    <el-table
      ref="areaPointTable"
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      :header-cell-style="tableHeaderMerge"
    >
      <el-table-column
        :prop="item.prop?item.prop:''"
        :label="item.titleName"
        align="center"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <template slot-scope="{ row, column, $index }">
          <span
            v-if="column.property=='bigType'"
            @click="handleDeleteN(row, column, $index)"
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
            style="cursor: pointer;"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
          <span
            v-else
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
        </template>
        <el-table-column
          :prop="iteam.prop"
          :label="iteam.titleName"
          align="center"
          v-for="(iteam, idx) in item.childTitle"
          :key="idx"
        >
          <template slot-scope="{ row }">
            <span
              :class="row[iteam.prop] == '未达标' ? 'text-red' : ''"
              :style="row[iteam.prop] < 0 ? 'color:red;' : ''"
            >
              {{
              isNaN(row[iteam.prop])?row[iteam.prop]:
              row[iteam.prop] >= 0
              ? row[iteam.prop]
              : Math.abs(row[iteam.prop])
              }}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
    
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data() {
    return {
      input: '',
    
      tableHeader: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },
        {
          titleName: '类型',
          childTitle: null,
          prop: 'smallType1',
        },
        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
      initTableData: [
        {
          id: 23,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '1.0',
          prop3: '2.5',
          prop4: '40.0',
          prop5: '1.0',
          prop6: '2.5',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 38,
          bigType: 'AA',
          smallType1: 'aa2',
          prop2: '8.0',
          prop3: '100.0',
          prop4: '2.0',
          prop5: '8.0',
          prop6: '100.0',
          prop7: '达标',
          prop8: '8.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '6.0',
          prop12: '75.0',
          prop13: '8.0',
          prop14: '100.0',
        },
        {
          id: 53,
          bigType: 'AA',
          smallType1: 'aa3',
          prop2: '19.0',
          prop3: '47.5',
          prop4: '40.0',
          prop5: '19.0',
          prop6: '47.5',
          prop7: '未达标',
          prop8: '19.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '19.0',
          prop12: '100.0',
          prop13: '19.0',
          prop14: '100.0',
        },
        {
          id: 68,
          bigType: 'AA',
          smallType1: 'aa4',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
        },
        {
          id: 83,
          bigType: 'XX',
          smallType1: 'xx1',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 831,
          bigType: 'XX',
          smallType1: 'xx2',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 832,
          bigType: 'XX',
          smallType1: 'xx3',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 98,
          bigType: 'QQ',
          smallType1: '-',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 113,
          bigType: 'WW',
          smallType1: 'ww',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 128,
          bigType: 'DD',
          smallType1: 'dd1',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1281,
          bigType: 'DD',
          smallType1: 'dd2',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1282,
          bigType: 'DD',
          smallType1: 'dd3',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
      ],
      dialogTypeMergeArr: [
        {
          rowspan: 4,
          colspan: 1,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
      ],
      tableData: [],
      select_box: [],
    }
  },
  mounted() {
    this.dealTableData(this.initTableData)
    this.dialogHeaderMergeArr = this.mergeTableHeader(this.tableHeader)
  },
  methods: {
    tableHeaderMerge({ row, column, rowIndex, columnIndex }) {
      console.log(312312)
      if (rowIndex == 0) {
        this.$nextTick(() => {
          // row[columnIndex].colSpan=this.dialogHeaderMergeArr[columnIndex];
          if (document.getElementsByClassName(column.id).length !== 0) {
            document
              .getElementsByClassName(column.id)[0]
              .setAttribute('colSpan', this.dialogHeaderMergeArr[columnIndex])
          }
        })
        if (this.dialogHeaderMergeArr[columnIndex] == 0) {
          return { display: 'none' }
        }
      }
    },
    mergeTableHeader(data) {
      let countArr = []
      let labelArr = []
      data.map((item) => {
        labelArr = countArr.map((obj) => obj.label)
        if (item.childTitle) {
          countArr.push({
            label: item.titleName,
            colSpan: item.childTitle.length,
            hasChild: true,
          })
        } else {
          if (labelArr.includes(item.titleName)) {
            countArr.map((iteam) => {
              if (iteam.label == item.titleName) iteam.colSpan += 1
            })
          } else {
            countArr.push({
              label: item.titleName,
              colSpan: 1,
              hasChild: false,
            })
          }
        }
      })
      let tableHeaderCountArr = []
      countArr.map((item) => {
        if (!item.hasChild) {
          for (var i = 0; i < item.colSpan - 1; i++) {
            tableHeaderCountArr.push(0)
          }
        }
        tableHeaderCountArr.push(item.colSpan)
      })
      return tableHeaderCountArr
    },
    /**
     * 处理表格数据合并行
     */
    dealTableData(data) {
      //把日期相同的数据并排在一块
      const list = this.margePropData(data, 'bigType')
      //处理日期相同的合并
      this.tableData = this.mergeRows(list, 'bigType')
    },

    handleDeleteN(row, column, $index) {
      this.initTableData.filter((item, index) => {
        if (row.bigType === item.bigType && index !== $index) {
        }

        // row.bigType === item.bigType && index !== 0
      })
      let curChildern = this.tableData.filter(
        (item, index) => row.bigType === item.bigType && index !== $index
      )
      let curChildern_init = this.initTableData.filter(
        (item, index) => row.bigType === item.bigType && row.smallType1 !== item.smallType1
      )

      if (this.tableData.filter((item, index) => row.bigType === item.bigType).length == 1) {
        if (curChildern.length > 1) {
          this.tableData.push(...curChildern)

          this.dealTableData(this.tableData)
        } else {
          this.tableData.push(...curChildern_init)

          this.dealTableData(this.tableData)
          return
        }
      } else {
        let newTableData = this.tableData.filter(
          (e) => curChildern.filter((x) => e.id != x.id).length == curChildern.length
        )

        // this.tableData = newTableData
        // this.tableData = this.tableData.filter((it, i) => row.id === it.id)
        this.dealTableData(newTableData)
      }
    },

    /**
     * 合并行
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: (number|*)}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0].includes(columnIndex)) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        }
      }
      // if (column.property == 'bigType') {
      //   return this.dialogTypeMergeArr[rowIndex]
      // }
    },
    /**
     * 数组中，某个属性相同的数据放在一块，如把某个日期相同的相连一起
     * @param list 传入的数组
     * @param prop 那个属性相同的数据
     * @returns {*[]}
     */
    margePropData(list = [], prop) {
      let arr = [],
        tempArr = {}
      list.forEach((item) => {
        if (!tempArr[item[prop]]) {
          tempArr[item[prop]] = [item]
        } else {
          tempArr[item[prop]].push(item)
        }
      })
      for (const tempArrKey in tempArr) {
        arr = [...arr, ...tempArr[tempArrKey]]
      }
      return arr
    },
    /**
     * 根据当前数据的位置，在数组中插入数据
     * 如数组【1，2，4，5】想要在2后面插入3，
     *1：首先获取到2的下标，
     *2：然后获取要插入之前的数据，获取要插入之后的数据，中间就是插入的位置
     *3：最后把这三个按顺序合并就得到在想要的位置插入数据
     * @param list
     * @param index
     * @param target
     */
    insertArrPositionOfIndex(list = [], index = 0, target = {}) {
      //根据index 找出小于index的数据放在左边
      const leftList = list.filter((t, i) => i < index)
      //根据index 找出大于index的数据放在右边
      const rightList = list.filter((t, i) => i >= index)
      // 最终合并数据
      return [...leftList, target, ...rightList]
    },
    /**
     * 合并行
     * @param list
     * @param prop
     */
    mergeRows(list = [], prop) {
      list.forEach((ele) => {
        ele.rowspan = 1
      })
      const len = list.length
      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (list[i][prop] === list[j][prop]) {
            list[i].rowspan++
            list[j].rowspan--
          }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1
      }
      return list
    },
  },
  /**
   * 对象数组去重
   * @param arr 数组
   * @param prop 根据什么字段去重
   * @returns {any[]}
   */ arrayDeduplication(arr, prop) {
    let map = new Map()
    return arr.filter((item) => !map.has(item[prop]) && map.set(item[prop], 1))
  },
}
</script>

方式二

在这里插入图片描述

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.titleName"
      :prop="column.prop"
      :width="column.width"
      :align="column.align"
    >
      <template slot-scope="{ row, $index }">{{ row[column.prop] }}</template>
      <el-table-column
        v-if="column.childTitle"
        v-for="(subColumn, subIndex) in column.childTitle"
        :key="subIndex"
        :label="subColumn.titleName"
        :prop="subColumn.prop"
        :width="subColumn.width"
        :align="subColumn.align"
      >
        <template slot-scope="{ row, $index }">{{ row[subColumn.prop] }}</template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '2.0',
          prop3: '5.0',
          prop4: '40.0',
          prop5: '2.0',
          prop6: '5.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '2.0',
          prop12: '100.0',
          prop13: '2.0',
          prop14: '100.0',
          children: [
            {
              bigType: 'aa1',
              smallType1: 'aa1',
              prop2: '2.0',
              prop3: '5.0',
              prop4: '40.0',
              prop5: '2.0',
              prop6: '5.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '2.0',
              prop12: '100.0',
              prop13: '2.0',
              prop14: '100.0',
              id: 2,
            },
            {
              bigType: 'aa2',
              smallType1: 'aa2',
              prop2: '8.0',
              prop3: '100.0',
              prop4: '2.0',
              prop5: '8.0',
              prop6: '100.0',
              prop7: '达标',
              prop8: '8.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '6.0',
              prop12: '75.0',
              prop13: '8.0',
              prop14: '100.0',
              id: 3,
            },
            {
              bigType: 'aa3',
              smallType1: 'aa3',
              prop2: '19.0',
              prop3: '47.5',
              prop4: '40.0',
              prop5: '19.0',
              prop6: '47.5',
              prop7: '未达标',
              prop8: '19.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '19.0',
              prop12: '100.0',
              prop13: '19.0',
              prop14: '100.0',
              id: 4,
            },
            {
              bigType: 'aa4',
              smallType1: 'aa4',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 5,
            },
          ],
        },
        {
          id: 6,
          bigType: 'BB',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          children: [
            {
              bigType: 'bb1',
              smallType1: 'bb1',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 7,
            },
            {
              bigType: 'bb2',
              smallType1: 'bb2',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 17,
            },
          ],
        },
        {
          id: 8,
          bigType: 'DD',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          children: [
            {
              bigType: 'dd1',
              smallType1: 'dd1',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 9,
            },
          ],
        },
      ],
      columns: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },

        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
    }
  },
}
</script>