还在为复杂表单布局而痛苦，看看这个Vue组件吧~

前言

在常见办公自动化（OA）系统中，表单用于收集和记录各种办公数据，表单作为流程的基础，用于启动和驱动业务流程，表单在团队合作和沟通中起到重要作用，通过表单中的数据，可以进行数据分析和统计，生成相应的报表和图表。

所以，表单是一个极其重要的功能，而表单当然离不开表单的布局控件啦~

同时，我个人开发了一个低代码页面设计器，需要封装一个可以动态配置且可以操作的单元格组件。

说到底，其实我封装这个组件就是为了在低代码页面设计器中使用。

实际场景

通过上面的图片，我们看一下这张简单的表单，有跨行，有跨列，有固定宽度的等等各种搭配。

哈哈哈哈哈哈，复杂的表单，我这里就不做过多赘述了，懂的都懂~

看到这里，小伙伴们应该等急了，下面直接上我封装的组件~

组件

简单说明：通过JSON Schema，动态生成表单布局控件，减少代码量，一次封装，“终身”受用。

开源地址：hex-table-cell: 一个可选中合并或者拆分指定单元格的 Vue 组件 (gitee.com)

在线地址: hex-table-cell在线地址

部分代码：

export interface Col {
  /** 唯一标识 */
  id: string;
  props: ColProps;
  /** 子集 */
  children: any[];
}

export interface ColProps {
  /** 是否合并单元格 */
  merged: boolean;
  /** 单元格宽度 单位px 或者 % */
  width: string;
  /** 单元格高度 单位px 或者 % */
  height: string;
  /** 规定单元格可横跨的列数。 */
  colSpan: number;
  /** 设置单元格可纵跨的行数。 */
  rowSpan: number;
  /** 某行 */
  rowIndex: number;
  /** 某列 */
  colIndex: number;
  /**
   * 是否被选中
   * @description 用于非禁用状态的选中合并拆分功能
   */
  selected: boolean;
  [key: string]: any;
}

具体详情请看源码~

组件不断完善中，欢迎大家star以及issues。

结尾

希望这个组件可以帮助大家解决相关问题~

么么，么么哒~