支持 coSpan rowSpan

Author: 黄书伟

examples/doc/table/api.md

@@ -65,9 +65,9 @@
 | row-mouse-enter|  鼠标进入表体行的回调| rowIndex |
 | row-mouse-leave|  鼠标离开表体行的回调| rowIndex |
 | sort-change|  点击排序回调| sortColumns（排序的列对象信息） |
-| cell-edit-done|  单元格编辑完成回调|  newValue,oldValue,rowData,column,index|
 | cell-edit-formatter|  单元格编辑格式化回调（可以对编辑的结果设置样式等）|  newValue,oldValue,rowIndex,rowData,field|
 | cell-edit-done|  单元格编辑完成回调|  newValue,oldValue,rowIndex,rowData,field|
+| cell-merge|  单元格合并，支持rowSpan、colSpan,返回值`{colSpan: 1,rowSpan: 1,content: '',componentName: ''}`；合并后单元格的内容可以通过`content`（html）设置也可以通过,`componentName`（自定义组件）设置| rowIndex,rowData,field|
 
 
 

examples/doc/table/cell-merge.md

@@ -0,0 +1,102 @@
+:::demo 通过传入回调函数 ‘cell-merge’ 设置要合并的单元格
+
+```html
+<template>
+    <div>
+        <v-table
+             :width="1100"
+             :height="430"
+             :columns="tableConfig.columns"
+             :table-data="tableConfig.tableData"
+             even-bg-color="#f4f4f4"
+             row-hover-color="#eee"
+             row-click-color="#edf7ff"
+             :cell-merge="cellMerge"
+        ></v-table>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import mockData from '../../mock/tableData.js'
+
+    export default{
+        name: 'frozen-title-columns',
+        data(){
+            return {
+                tableConfig: {
+                    tableData: [],
+                    columns:[
+                           {field: 'name', title:'姓名', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
+                           {field: 'gender', title:'性别', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
+                           {field: 'tel', title: '手机号码', width: 180, titleAlign: 'center',columnAlign:'center', isFrozen: false},
+                           {field: 'birthday', title: '出生日期', width: 180, titleAlign: 'center',columnAlign:'center'},
+                           {field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center'},
+                           {field: 'address', title: '地址', width: 430, titleAlign: 'center',columnAlign:'left'}
+                         ]
+                }
+            }
+        },
+        methods: {
+            // 模拟获取数据
+            getTableData(){
+                var self = this
+
+                setTimeout(function () {
+                    self.tableConfig.tableData = mockData
+                }, 100)
+            },
+            cellMerge(rowIndex,rowData,field){
+                if (field === 'name' && rowData[field] === '李伟') {
+                    return {
+                        colSpan: 2,
+                        rowSpan: 1,
+                        content: '<span style="color:red">单元格 colSpan</span>',
+                        componentName: ''
+
+                    }
+                } else if (rowIndex === 3 && field === 'gender') {
+
+                    return {
+                        colSpan: 1,
+                        rowSpan: 3,
+                        content: '<span style="color:red">单元格 rowSpan</span>',
+                        componentName: ''
+                    }
+
+                }else if (rowIndex === 2 && field === 'birthday') {
+
+                        return {
+                            colSpan: 2,
+                            rowSpan: 3,
+                            content:'',
+                            componentName:'table-cell-merge',
+                        }
+                }
+            }
+        },
+        created(){
+            this.getTableData()
+        }
+    }
+
+        // 自定义列组件
+        Vue.component('table-cell-merge',{
+            template:`<span style="color:red">
+               单元格 rowSpan 和 colSpan 同时使用
+            </span>`,
+            props:{
+                rowData:{
+                    type:Object
+                },
+                field:{
+                    type:String
+                },
+                index:{
+                    type:Number
+                }
+            }
+        })
+</script>
+```
+:::

examples/doc/table/main.md

@@ -102,6 +102,17 @@
             </div>
         </div>
 
+         <div class="mt30">
+                <h3>单元格合并</h3>
+
+                <div class="mt30">
+                    <div class="bold">
+                    <a class="anchor" id="table-cell-merge" @click.stop="goAnchor('table-cell-merge')">#</a>
+                    支持 rowSpan、colSpan</div>
+                    <cell-merge></cell-merge>
+                </div>
+         </div>
+
         <div class="mt30 mb30">
             <h3>表格自适应（改变浏览器窗口大小试试看）</h3>
 
@@ -191,6 +202,8 @@
     import frozenTitleColumns from './frozen-title-columns.md'
     import complexHeaderFixedColumn from './complex-header-fixed-column.md'
 
+    import cellMerge from './cell-merge.md'
+
     import simpleTableResize from './simple-table-resize.md'
     import complexTableResize from './complex-table-resize.md'
 
@@ -218,6 +231,8 @@
             complexHeaderFixedColumn,
             frozenTitleColumns,
 
+            cellMerge,
+
             cellEdit,
             cellEditAdvanced,