修改后的效果图如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
标签:index,CheckBox,obj,res,合并,deliverId,antd,attrs,row From: https://www.cnblogs.com/Jessie-candy/p/17252994.html