当前位置：首页 > news >正文

vue2+antd实现表格合并；excel效果

news 来源：原创 2024/9/19 0:44:40

效果图

在这里插入图片描述

一、html

<template><div><a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered><template slot="content1" slot-scope="text">{{text}}</template> </a-table></div>
</template>

二、js

export default {data () {return {sortLevel: ['date'],columns: [{title: '日期',align: 'center',dataIndex: 'date',key: 'date',customRender: this.dateRender,},{title: '内容',colSpan: 2,dataIndex: 'content',scopedSlots: { customRender: 'content1' },},{title: '内容',colSpan: 0,dataIndex: 'content2',// customRender: renderContent,},],datas: [{id: 1,content: '123',content2: 'qqw',date: '周一'},{id: 2,content: '123',content2: 'qwqw',date: '周二'},{id: 3,content: '123',content2: 'wewe',date: '周一'},,{id: 42,content: '12332',content2: 'sad',date: '周三'},,{id: 52,content: '1223',content2: 'asdasd',date: '周一'}],dataSource: []}},mounted () {this.dataSource = this.convertData(this.datas)console.log('   this.dataSource : ', this.dataSource);},methods: {dateRender (value, row, index) {return {children: value,attrs: {rowSpan: row.dateRowSpan},};},// 获取需要合并数据的rowSpanconvertData (arr, levelIndex = 0) {const levelKey = this.sortLevelconst key = levelKey[levelIndex]// 根据不同维度重新整合数据let groupObj = this.groupBy(arr, key) || {};Object.keys(groupObj).forEach(groupKey => {if (levelIndex < levelKey.length - 1) {groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)}// 计算rowSpangroupObj[groupKey].forEach((item, index, arr) => {item[`${key}RowSpan`] = index === 0 ? arr.length : 0})})return Object.values(groupObj).flat()},// 根据属性分组groupBy (arr = [], key) {let obj = {}arr.forEach(item => {const val = item[key]if (!obj[val]) {obj[val] = []}obj[val].push(item)})return obj},},
}

三、完整代码

<template><div><a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered></a-table></div>
</template><script>export default {data () {const renderContent = (value, row, index) => {const obj = {children: value,attrs: {},};if (index === 3) {obj.attrs.colSpan = 0;}return obj;};return {sortLevel: ['date'],columns: [{title: '日期',align: 'center',dataIndex: 'date',key: 'date',customRender: this.dateRender,},{title: '内容',colSpan: 2,dataIndex: 'content',},{title: '内容',colSpan: 0,dataIndex: 'content2',// customRender: renderContent,},],datas: [{id: 1,content: '123',content2: 'qqw',date: '周一'},{id: 2,content: '123',content2: 'qwqw',date: '周二'},{id: 3,content: '123',content2: 'wewe',date: '周一'},,{id: 42,content: '12332',content2: 'sad',date: '周三'},,{id: 52,content: '1223',content2: 'asdasd',date: '周一'}],dataSource: []}},mounted () {this.dataSource = this.convertData(this.datas)console.log('   this.dataSource : ', this.dataSource);},methods: {dateRender (value, row, index) {return {children: value,attrs: {rowSpan: row.dateRowSpan},};},// 获取需要合并数据的rowSpanconvertData (arr, levelIndex = 0) {const levelKey = this.sortLevelconst key = levelKey[levelIndex]// 根据不同维度重新整合数据let groupObj = this.groupBy(arr, key) || {};Object.keys(groupObj).forEach(groupKey => {if (levelIndex < levelKey.length - 1) {groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)}// 计算rowSpangroupObj[groupKey].forEach((item, index, arr) => {item[`${key}RowSpan`] = index === 0 ? arr.length : 0})})return Object.values(groupObj).flat()},// 根据属性分组groupBy (arr = [], key) {let obj = {}arr.forEach(item => {const val = item[key]if (!obj[val]) {obj[val] = []}obj[val].push(item)})return obj},},
}
</script>
<style lang="less" scoped></style>```