ant-design-vue动态表格合并怎么实现

这篇文章主要介绍“ant-design-vue动态表格合并怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ant-design-vue动态表格合并怎么实现”文章能帮助大家解决问题。

数据格式

后端会返回给我们一个数组,数组的每一项格式是这样,在这个需求里，我们需要对 title，department,bugType 这三个字段相同的值的单元格进行合并

 {           fixCount: 0,           id: 0,           codeType: '新代码',           bugType: 'ui展示问题',           notFixedCount: 0,           todayAdd: 0,           totalCount: 0,           title: 'bug总览',           department: '开发一部'         },

ant-desgin-vue表格提供的api

ant-desigin-vue的table组件提供一个自定义渲染单元格的方法customRender，接收两个参数,一个text当前值，row当前行，我们可以根据我们业务需求对它进行操作，然后把它return 出去就能得到想要的效果

表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

具体可以看下这个链接 

所以先定义columns也就是表头格式

    columns: [         {           title: '',           dataIndex: 'title',           width: 120,           customRender: (text, row) => {             return {               children: `${text}`,               attrs: {                 rowSpan: row.titleRowSpan               }             }           }         },         {           title: '部门',           dataIndex: 'department',           width: 120,           customRender: (text, row, index) => {             return {               children: `${text}`,               attrs: {                 rowSpan: row.departmentRowSpan               }             }           }         },         {           title: '代码类型',           dataIndex: 'codeType',           width: 120         },         {           title: '总数',           dataIndex: 'totalCount',           width: 120         },         {           title: '修复',           dataIndex: 'fixCount',           width: 120         },         {           title: '未修复',           dataIndex: 'notFixedCount',           width: 120         },         {           title: '今日新增',           dataIndex: 'todayAdd',           width: 120         },         {           title: 'Bug类型',           dataIndex: 'bugType',           width: 120,           customRender: (text, row, index) => {             return {               children: `${text}`,               attrs: {                 rowSpan: row.bugTypeRowSpan               }             }           }         }       ],

合并单元格算法实现

说下思路：

其实就是类似于双指针的思想：

• 需要两次循环，第一次循环i，作为合并单元格后的起始点，

• 第二次循环j是从起始点找下一个值是否是相同的值，如果相同则合并单元格,合并的数量就是count，然后把本次循环相同值的最后一个序号保存下来，第一次循环就从这个序号开始继续跑

具体代码实现如下：

//  合并单元格     combineRow(key) {       const tableData = this.tableData       for (var i = 0; i < tableData.length; i++) {         const item = tableData[i]         let count = 1         for (let j = i + 1; j < tableData.length; j++) {           // 如果是同一个值，往后递增           if (item[key] === tableData[j][key]) {             count++             // 往后相同的值都设为空单元格             tableData[j][`${key}RowSpan`] = 0             // 只有同值第一个才设置合并的单元格数             item[`${key}RowSpan`] = count             // 所有都是为同一个值的情况             // 如果到了尾部，则循环结束             if (j === tableData.length - 1) {                 return             }           } else {             // 指针跳转到下一个，从下一排开始             i = j - 1             count = 1             tableData[j][`${key}RowSpan`] = 0             break           }         }       }       this.tableData = tableData     }

然后我们在created中调用

  created() {     this.combineRow('title') // 合并title     this.combineRow('department') // 合并部门     this.combineRow('bugType') // 合并bug类型   }

关于“ant-design-vue动态表格合并怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。