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

效果图

一、html

javascript 复制代码
<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

javascript 复制代码
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
        },
      };
    },
    // 获取需要合并数据的rowSpan
    convertData (arr, levelIndex = 0) {
      const levelKey = this.sortLevel
      const 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)
        }
        // 计算rowSpan
        groupObj[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
    },
  },
}

三、完整代码

javascript 复制代码
<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
        },
      };
    },
    // 获取需要合并数据的rowSpan
    convertData (arr, levelIndex = 0) {
      const levelKey = this.sortLevel
      const 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)
        }
        // 计算rowSpan
        groupObj[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>```
相关推荐
袁煦丞8 分钟前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子35 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋1 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort1 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记1 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com1 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1111 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs