Iview和Element UI Table组件动态合并单元格

说明: 此方法暂时只支持合并列,不支持合并行。

安装

npm i method-tools --save

导入

import { calculate, handleSpan } from "method-tools/table-merge";

        每次表格数据更新时都要调用calculate函数来计算需要合并的单元格, calculate函数接受四个参数: 第一个是表格的数据、第二个是表格的列,第三个是需要合并的列的字段组成的数组,第四个是一个标识

        handleSpan函数接收一个参数,handleSpan的参数要和calculate的第四个参数保持一致;

        handleSpan()作为table组件的span-method的参数;

        handleSpan的参数和calculate的第四个参数可以同时都不传;

在iview中使用

在Element UI中使用 

        在element ui中使用需要自己构造columns数组,也就是calculate的第二个参数,为一个数组对象,每个对象都要有个属性key,值为渲染当前列的字段, columns的顺序和长度要和table的列保持一致



你可能感兴趣的:(组件,vue,函数,view,design,算法,javascript)