elementuitable row col的合并单元格

最新推荐文章于 2024-08-13 23:10:15 发布

samuBO

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： js vue

原文链接：https://www.cnblogs.com/mmzuo-798/p/11686021.html

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

思想：在第几行合并几行

<template>
  <div>
    <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'FzTable',
    data () {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎12',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
            id: '12987126',
            name: '王小虎4',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }, {
            id: '12987126',
            name: '王小虎1',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }, {
            id: '12987126',
            name: '王小虎',
            amount1: '5394',
            amount2: '4.1',
            amount3: 15
          }],
        pos: 0,
        spanArr: [],
      }
    },
    methods: {
      getSpanArr (data) {
        this.spanArr = []
        this.pos = 0

        data.forEach((item, index) => {
          // 第一行直接 this.spanArr中添加一个1
          if (index == 0) {
            this.pos = 0
            this.spanArr.push(1)
          } else {
            // 如果数组中2个相邻元素相同，则这个index的spanArr + 1
            if (data[index].id == data[index - 1].id) {
              this.spanArr[this.pos] = this.spanArr[this.pos] + 1
              console.log(this.spanArr[this.pos]," this.spanArr[this.pos]")
              this.spanArr.push(0)
              // 如果数组中2个相邻元素不相同，索引+1 spanArr= 0
            } else {
              this.spanArr.push(1)
              this.pos = index
            }
          }
          console.log(this.spanArr, "spanArr")
        })
      },

      objectSpanMethod ({row, column, rowIndex, columnIndex}) {
        // columnIndex == 0表示只有第一列才做合并操作，同理第二列需要合并则加一个columnIndex == 1
        // 但是其他的以第一行作为默认值
        if (columnIndex == 0 || columnIndex == 1) {
          let _row = this.spanArr[rowIndex]
          let _col = _row > 0 ? 1 : 0
          return {rowspan: _row, colspan: _col}
        }
        return {rowspan: 1, colspan: 1}
      }

    },
    created () {
      this.getSpanArr(this.tableData6)
    },
    mounted () {
    },
    watch: {}

  }
</script>

<style scoped>

</style>