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

最新推荐文章于 2024-08-15 18:19:19 发布

葫芦娃y

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量389

点赞数 2

分类专栏：前端 antd 文章标签：前端 vue.js anti-design-vue

本文链接：https://blog.csdn.net/weixin_43857653/article/details/140469816

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

antd

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

一、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
        },
      };
    },
    // 获取需要合并数据的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
    },
  },
}

三、完整代码

<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>```