修改antd的table合并行之后CheckBox不能合并的问题

发布时间 2023-03-24 18:19:20作者: 糖糖H

修改后的效果图如下:

<template>
  <page-header-wrapper
    :title="false"
    :breadcrumb="{routes:[]}"
  >
    <div>
      <div class="list">
        <a-table
            :columns="columns0"
            :row-key="record => record.tid"
            :data-source="data0"
            :pagination="false"
            :scroll="{ x: 1900 }"
          >
            <template slot="customTitle" >
              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="handleAllCheck"></a-checkbox>
            </template>
            <template slot="address" slot-scope="text, record">
              {{record.province}}{{record.city}}{{record.region}}{{record.address}}
            </template>
            <template slot="status" slot-scope="text, record">
              {{purchaseStatus[record.status]}}
            </template>
            <template slot="action" slot-scope="text, record">
              <a @click="() => lookSerciveArea(record)">订货单明细</a>
              <a v-if="record.status >= 60 && !record.afterItem" style="margin-left: 15px;" @click="() => toAudit(record)">发起售后</a>
              <a v-if="record.status >= 60 && record.afterItem" style="margin-left: 15px;" @click="() => toDetail(record)">售后详情</a>
            </template>
        </a-table>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import lodash from 'lodash'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { purchaseStatusObj } from '@/utils/const/orderStatus'
export default {
  name: 'OrderDeliverDetail',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
      purchaseStatus: purchaseStatusObj,
      id: '',
      lodash,
      detail: {},
      data0: [],
      selectedRowKeys: [], // 记录所有勾选的数据
      checkAll: false,
      indeterminate: false,
      query: {
        status:undefined,
      },
      columns0: [
        { width: '40px', align: 'center', scopedSlots: {title: 'customTitle'},
          customRender: (text, record, index) => {
            const obj = {
              children: (
                <a-checkbox 
                  value={record.deliverId} 
                  checked={this.selectedRowKeys.includes(record.deliverId)} 
                  onChange={this.handleOneCheck}
                ></a-checkbox>
              ),//行单选
              attrs: {
                rowSpan: 1 // 行合并
              }
            }
            let arr = this.data0.filter((res) => {
              if(res.deliverId == record.deliverId){
                return res.deliverId == record.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != record.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
          fixed: 'left'
        },
        { title: '发货单号', dataIndex: 'deliverId',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          }, fixed: 'left'
        },
        { title: '地址类型', dataIndex: 'addressType',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '供应商发货地址', dataIndex: 'fullAddress',width: '200px',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '收货人', dataIndex: 'receiver',width: '150px',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '联系方式', dataIndex: 'contact',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '状态', dataIndex: 'status',scopedSlots: { customRender: 'status' },
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '司机', dataIndex: 'expressName',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '联系方式', dataIndex: 'expressNo',
          customCell: (row, index) => {
            const obj = {
              attrs: {rowSpan: 1},
            };
            let arr = this.data0.filter((res) => {
              if(res.deliverId == row.deliverId){
                return res.deliverId == row.deliverId;
              }
            });
            if (index == 0 || this.data0[index - 1].deliverId != row.deliverId) {
              obj.attrs.rowSpan = arr.length;
            } else {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        },
        { title: '商品名称', dataIndex: 'skuTitle' },
        { title: '商品编码', dataIndex: 'sku'},
        { title: '数量', dataIndex: 'purchaseNum'},
        { title: '操作', scopedSlots: { customRender: 'action' },fixed:'right' }
      ],
      visible:false,
      loading: false,
      confirmLoading:false,
    }
  },
  mounted () {
    this.id = this.$route.query.id
  },
  methods: {
    // 全选
    handleAllCheck(e){
      this.indeterminate = false
      this.checkAll = e.target.checked
      const arrNo = this.data0.map(item => item.deliverId)
      if(e.target.checked){
        const concatArr = this.selectedRowKeys.concat(arrNo)
        this.selectedRowKeys = this.lodash.uniqWith(concatArr,this.lodash.isEqual)
      }else{
        this.selectedRowKeys = this.selectedRowKeys.filter(item => !arrNo.includes(item))
      }
      console.log(this.selectedRowKeys)
    },
    // 单选
    handleOneCheck(e){
      const map = new Map()
      const newArr = this.data0.filter(key => !map.has(key.deliverId) && map.set(key.deliverId, 1))
      let dataLength = newArr.length
      if(e.target.checked){
        this.selectedRowKeys.push(e.target.value)
      }else{
        this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== e.target.value)
      }
      let selectLength = this.selectedRowKeys.length
      if(selectLength != dataLength){
        this.checkAll = false
      }else{
        this.checkAll = true
      }
      console.log(this.selectedRowKeys)
    },
    toDetail (record) {
      console.log('售后详情:',record)
    },
    toAudit (record) {
      console.log('发起售后:',record)
    },
    lookSerciveArea(record){
      console.log('订货单明细',record)
    },
  }
}
</script>

<style lang="less" scoped>
  /deep/ .ant-table-tbody > tr > td[colspan="0"] {
    display: none;
  }
  /deep/ .ant-table-tbody > tr > td[rowspan="0"] {
    display: none;
  }
  .list {
    margin-bottom: 10px;
    padding: 25px 30px;
    background: #fff;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 33.33%;
        margin-bottom: 10px;
        .field {
          color: #689bed;
        }
        .check {
          margin-left: 5px;
          color: #689bed;
          cursor: pointer;
        }
      }
    }
  }
</style>
View Code