element动态表头合并表格

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
      <el-table-column align="center" label="" prop="type"></el-table-column>
      <el-table-column align="center" label="" prop="childType"></el-table-column>
      <el-table-column v-for="header in tableHeaders" align="center" :key="header.key" :prop="header.key"
        :label="header.label">
        <el-table-column v-show="header.children" v-for="child in header.children" align="center" :key="child.key"
          :prop="child.key" :label="child.label">
          <el-table-column v-show="child.children" v-for="child2 in child.newChildren" align="center"
            :label="child2.label" :key="child2.key" :prop="child2.prop"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'table_test',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {

      tableHeaders: [
        {
          label: '张三',
          key: 'three',
          children: [
            {
              label: '早班', key: 'morning', newChildren: [
                { label: '本日', key: 'day', prop: 'day1' },
                { label: '比率', key: 'dailyRate', prop: 'dailyRate1' },
                { label: '月累计', key: 'month', prop: 'month1' },
                { label: '月比率', key: 'monthRate', prop: 'monthRate1' },

              ]
            }]
        },
        {
          label: '李四',
          key: 'four',
          children: [
            {
              label: '中班', key: 'afternoon', newChildren: [
                { label: '本日', key: 'day', prop: 'day2' },
                { label: '比率', key: 'dailyRate', prop: 'dailyRate2' },
                { label: '月累计', key: 'month', prop: 'month2' },
                { label: '月比率', key: 'monthRate', prop: 'monthRate2' },
              ]
            },

          ]
        },
        {
          label: '王五',
          key: 'five',
          children: [
            {
              label: '晚班', key: 'night', newChildren: [
                { label: '本日', key: 'day', prop: 'day3' },
                { label: '比率', key: 'dailyRate', prop: 'dailyRate3' },
                { label: '月累计', key: 'month', prop: 'month3' },
                { label: '月比率', key: 'monthRate', prop: 'monthRate3' },
              ]
            },

          ]
        }
      ],

      headerList1: [

      ],

      tableData: [
        { type: '原料', parent: '1', childType: '投料量', day1: '我是1天', dailyRate1: '我是1天比率', month1: '我是1月', monthRate1: '我是1月比率', day2: '我是2天', dailyRate2: '我是2天比率', month2: '我是2月', monthRate2: '我是2月比率', day3: '我是3天', dailyRate3: '我是3天比率', month3: '我是3月', monthRate3: '我是3月比率' },
        { type: '辅料', parent: '2', childType: '辅料1', day1: '我是1天2', dailyRate1: '我是1天比率2', month1: '我是1月2', monthRate1: '我是1月比率2', day2: '我是2天2', dailyRate2: '我是2天比率2', month2: '我是2月2', monthRate2: '我是2月比率2', day3: '我是3天2', dailyRate3: '我是3天比率2', month3: '我是3月2', monthRate3: '我是3月比率2' },
        { type: '辅料', parent: '2', childType: '辅料2', day1: '我是1天3', dailyRate1: '我是1天比率3', month1: '我是1月3', monthRate1: '我是1月比率3', day2: '我是2天3', dailyRate2: '我是2天比率3', month2: '我是2月3', monthRate2: '我是2月比率3', day3: '我是3天3', dailyRate3: '我是3天比率3', month3: '我是3月3', monthRate3: '我是3月比率3' },
      ],

      spanArr: [],
      pos: 0
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
  },
  created() {
    this.getSpanArr(this.tableData)
  },
  methods: {

    getSpanArr(data) {
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          this.spanArr.push(1)

          this.pos = 0

        } else {

          if (data[i].type == data[i - 1].type) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
      console.log(this.spanArr, '面积按');
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex == 0 && rowIndex !== this.tableData.length - 1) {
      //   const _row = this.spanArr[rowIndex]
      //   const _col = _row > 0 ? 1 : 0
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   }
      // }

      // if (rowIndex == this.tableData.length - 1 && (columnIndex == 1 || columnIndex == 2 || columnIndex == 3)) {
      //   return [0, 0]
      // }

      console.log(row, column);

      if (columnIndex !== 0 && columnIndex !== 1) {
        return { rowspan: 1, colspan: 1 };
      }

      // 如果当前行是该组织机构的第一行，则计算该组织机构的行数，并返回 { rowspan, colspan: 1 }，表示需要合并的行数为 rowspan
      if (
        rowIndex === 0 ||
        row.type !== this.tableData[rowIndex - 1].type
      ) {
        const rowCount = this.tableData.filter(
          (i) => i.type === row.type
        ).length;
        return { rowspan: rowCount, colspan: 1 };
      }
      // 否则返回 { rowspan: 0, colspan: 0 }，表示该单元格已被上方单元格合并
      return { rowspan: 0, colspan: 0 };


    }
  }
};
</script>
<style lang='' scoped>
</style>

原文地址：https://blog.csdn.net/weixin_38999134/article/details/143506514

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！