a-table手动分页，指定列相同内容的行合并

<template>
  <a-table
    bordered
    :columns="columns"
    :dataSource="paginatedData"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <span slot="action" slot-scope="text,record">
      <a-input-number v-model="record.amount" :min="0"/>
    </span>
  </a-table>
</template>
 
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns: [
        {
          'amount': 500, // 分
          'region_ids': [1, 2, 3, 5],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [
              { 'start_time': '00:00:00', 'end_time': '12:59:59' }
            ] }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        },
        {
          'amount': 444,
          'region_ids': [4, 6, 7],
          'week_times': [{
            'weeks': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'time_ranges': [{ 'start_time': '13:00:00', 'end_time': '23:59:59' }]
          }],
          'sku_id': 111,
          'price': 100, // 分
          'product_id': 2222,
          'product_name': 'xxxx'
        }],
      data: [],
      pagination: {
        current: 1,
        pageSize: 4,
        total: 0
      }
    }
  },
  computed: {
    paginatedData() {
      const { current, pageSize } = this.pagination
      const start = (current - 1) * pageSize
      const end = start + pageSize
      return this.data.slice(start, end)
    }
  },

  async mounted() {
   if(this.tableData.length>0){
       this.data = this.tableData
    }
    this.data.forEach(item => {
      const weeksArr = item.week_times[0].weeks.map(item => this.getWeekText(item))
      const text = weeksArr.length === 8 ? '全部周期' : weeksArr.join(',')
      item.weekText = text
    })
    //将名字相同周期相同的放在一起
    this.data.sort((a, b) => {
      if (a.product_name === b.product_name && a.weekText.length === b.weekText.length) {
        return 0
      } else if (a.product_name === b.product_name) {
        return a.weekText.length - b.weekText.length
      }
      return a.product_name > b.product_name ? 1 : -1
    })
    // console.log('8888888data', this.data)
    this.pagination.total = this.data.length
    await this.init()
  },

  methods: {
     init() {
      this.getColumns()
    },

    renderContent(value, row, index, type) {
      const obj = {
        children: value,
        attrs: { rowSpan: 0 }
      }
      if (this.paginatedData.length > 1) {
        if (index === 0) {
          obj.attrs.rowSpan = (value === this.paginatedData[index + 1][type] && row.product_name === this.paginatedData[index + 1]['product_name']) ? this.getRowSpanNum(value, type, row, 0) : 1
        } else {
          obj.attrs.rowSpan = (value === this.paginatedData[index - 1][type] && row.product_name === this.paginatedData[index - 1]['product_name']) ? 0 : this.getRowSpanNum(value, type, row, index)
        }
      } else {
        obj.attrs.rowSpan = 1
      }
      
      return obj
    },


    getRowSpanNum (value, type, row, index) {
      const newPaginatedData = this.paginatedData.slice(index)
      let num = 0
      for (let i = 0; i < newPaginatedData.length; i++) {
        if (value === newPaginatedData[i][type] && row.product_name === newPaginatedData[i]['product_name']) {
          num += 1
        } else {
          break
        }
      }
      return num
    },

    handleTableChange(pagination) {
      this.pagination = pagination
    },
    
    getWeekText (value) {
      switch (value) {
        case 'Mon':
          return '周一'
        case 'Tue':
          return '周二'
        case 'Wed' :
          return '周三'
        case 'Thu' :
          return '周四'
        case 'Fri' :
          return '周五'
        case 'Sat' :
          return '周六'
        case 'Sun' :
          return '周日'
        default:
          return ''
      }
    },

    getColumns() {
      const columns = [{
        title: '商品名称',
        dataIndex: 'product_name',
        align: 'center',
        customRender: (value, data, index) => {
          return this.renderContent(value, data, index, 'product_name')
        }
      }, {
        title: '价格',
        dataIndex: 'price',
        align: 'center',
        customRender: (value, data, index) => {
          return this.renderContent(value, data, index, 'price')
        }
      },
      {
        title: '周期',
        align: 'center',
        // scopedSlots: { customRender: 'weekTimes' }
        dataIndex: 'weekText',
        customRender: (value, data, index) => {
          return this.renderContent(value, data, index, 'weekText')
        }
      }, {
        title: '时段',
        dataIndex: 'time_ranges',
        align: 'center',
        customRender: (value, data) => {
          return `${data.week_times[0].time_ranges[0].start_time}~${data.week_times[0].time_ranges[0].end_time}`
        }
      },{
        title: '现抽金额',
        align: 'center',
        width: 200,
        dataIndex: 'amount',
        scopedSlots: { customRender: 'action' }
      }]

      this.columns = columns
    }
  }
}
</script>