table-merge-utils

# 安装
npm install table-merge-utils

# 引入
import TableMergeUtils from "table-merge-utils"


# 1.1 用工具初始化表格数据 4*4
let rows1 = TableMergeUtils.init({ rows: 4, cols: 4 })

let option = {
    # 表格至少存在的行数: 小于该值将不能删除行
    minRetainRow: 0,
    # 表格至少存在的列数: 小于该值将不能删除列
    minRetainCol: 0,
    # 单元格水平拆分最小colspan: 小于该值将不能水平拆分单元格
    minSplitHcolspan: 2,
    # 单元格垂直拆分最小rowspan: 小于该值将不能垂直拆分单元格
    minSplitVrowspan: 2,
    # rowspan错位修复方式  0:不处理; 1:修复rowspan最小为1; 2: 添加空行;
    fixRowType:  1
}

let tableUtil1 = new TableMergeUtils(rows, option)


# 1.2 已有表格二维数据
let rows2 = [
    [{rowspan: 1, colspan: 1, width:10, height:10}],
    [{rowspan: 1, colspan: 1, width:10, height:10}]
]
let tableUti2 = new TableMergeUtils(rows2) 


# 2.vue视图渲染表格
<table>
    <tr v-for="(row, rowIndex) in tableUtil.rows" :key="rowIndex">
        <tdv-for="(td, colIndex) in row" :rowspan="td.rowspan" :colspan="td.colspan"></td>
    </tr>
</table>


# 3.操作工具

# 选中格子(rowIndex, colIndex) 更新按钮状态
tableUtil.getDisabledHandles(rowIndex, colIndex);

# 选中格子(rowIndex, colIndex) 向下添加行
tableUtil.insertRow(rowIndex， colIndex, 1)
# 选中格子(rowIndex, colIndex）水平拆分单元格
tableUtil.splitH(rowIndex， colIndex)
...

# 引入链接
<script src="https://unpkg.com/table-merge-utils@1.0.3/dist/table-merge-utils.min.js"></script>

# 初始化
var tableUtil = new TableMergeUtils(tableMergeUtils.init({ rows: 4, cols: 4 }))
...