Ant Design Vue Table 组件合并单元格
项目开发中，有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现。
<template><div><a-table bordered :data-source="dataSource" :columns="columns"></a-table></div></template><script>const dataSource = [{key: '1', school: '林州一中', grade: '高一', class: '二班', name: '徐强' },{key: '2', school: '林州一中', grade: '高一', class: '一班', name: '林东'},{key: '3', school: '林州一中', grade: '高一', class: '二班', name: '李丹'},{key: '4', school: '林州一中', grade: '高二', class: '二班', name: '刘康'},{key: '5', school: '实验高中', grade: '高三', class: '二班', name: '杨江'},{key: '6', school: '实验高中', grade: '高三', class: '一班', name: '陈锋'},{key: '7', school: '实验高中', grade: '高三', class: '二班', name: '李华'},{key: '8', school: '实验高中', grade: '高四', class: '二班', name: '赵铭'}]const columns = [{title: '学校', dataIndex: 'school', width: '25%',scopedSlots: {customRender: 'school' }, align: 'center', key: 'school',customRender (_, row) {return {children: row.school,attrs: {rowSpan: row.schoolRowSpan}}}},{title: '年级', dataIndex: 'grade', width: '25%',scopedSlots: {customRender: 'grade' }, align: 'center', key: 'grade',customRender (_, row) {return {children: row.grade,attrs: {rowSpan: row.gradeRowSpan}}}},{title: '班级', dataIndex: 'class', width: '25%',scopedSlots: {customRender: 'class' }, align: 'center'},{title: '姓名', dataIndex: 'name', width: '25%',scopedSlots: {customRender: 'name' }, align: 'center'}]export default {name: 'TableMerge',data () {return {dataSource,columns}},methods: {// 合并单元格rowSpan (key, data) {const arr = data.reduce((result, item) => {if (result.indexOf(item[key]) < 0) {result.push(item[key])}return result}, []).reduce((result, keys) => {const children = data.filter(item => item[key] === keys)result = result.concat(children.map((item, index) => ({...item,[`${key}RowSpan`]: index === 0 ? children.length : 0})))return result}, [])return arr},// 表格合并mergeRowCell (data) {let tableData = this.rowSpan('school', data)tableData = this.rowSpan('grade', tableData)this.dataSource = tableData}},mounted () {this.mergeRowCell(this.dataSource)}}</script>
合并前：
合并第一列：
合并第二列：
