【乐吾乐大屏可视化组态编辑器】表格

表格

大屏表格（tablePlus）是在  表格（table）  的基础上的增强，包含了table所有功能，拥有更强大的功能。需要注意的是，table是开源的，而tablePlus属于企业图形库，是需要购买的。

属性

表格控件属性继承自Pen，并扩展了以下可配置属性：

名称	类型	描述
data	二维数组	表格数据
styles	{    row：number 第几行    col：number 第几列      //col和row都配置时 表示设置单元格样式    height：number 行高(配置row,col不配置，否则不生效)    width:  number 列宽(配置col,row不配置，否则不生效)      background: string 背景颜色    textColor: string   文字颜色    fontSize: number  文字大小    fontWeight: string 文字粗细    fontStyle:string 字体风格    textAlign:string  文字水平对齐方式    pens:Pen[] 配置单元格或者一列的子图元样式。 }[]	表格样式配置
columns	{   type:string  该列输入类型  目前支持'numeric'|'select'，默认字符串输入。   dropdownList：Dropdown[] //type为“select”时，下拉选择配置。   fnJs: （pen,data）=>any   可以通过脚本自定义该列样式，参数pen表示当前表格图元，参数data为单元格数据。 }[]	列配置
rowHeight	number	默认行高
colWidth	number	默认列宽
rowHeaders	boolean	是否存在行头，不会增加/删除行头，表示是否把每行第一个单元格作为行头
colHeaders	boolean	是否存在列头 （表头），不会增加/删除列头，表示是否把每列第一个单元格作为列头
bordered	boolean	是否显示表格边框
vLine	boolean	是否显示垂直线
hLine	boolean	是否显示水平线
stripe	boolean	是否显示斑马纹
stripeColor	string	斑马纹颜色
maxNum	number	最大显示行数(包含表头)，用作滚动表格，当表格数据长度大于最大行数，将出现滚动条（锁定（预览）状态下）
swiper	boolean	滚动表格是否自动滚动
pagination	{    total?: number;   数据总条数    current?: number;   当前页    pageSize?: number;   每一页的数据量    maxPageBtn?: number;  最多显示页码按钮数    pageSizeOptions?: number[];   分页大小控制器    size?: string;   分页组件尺寸 }	表格分页，复用的分页组件。
mergeCells	{ row:number; //起始行索引 col:number; //起始列索引 rowspan:number; //跨几行 colspan:number; //跨几列 }[]	记录合并的单元格

添加我的第一个表格

const data = new Array(100).fill(0) 
          .map((_, row) => new Array(10).fill(0)
          .map((_, column) => `${row}, ${column}`));
data.splice(0, 0, new Array(10).fill(0).map((_, i) =>String.fromCharCode(65+i)));
//表格数据
const pen = {
          name: 'tablePlus',
          x:100,
          y:100,
          width: 0,  // 初始添加时，表格宽高会根据数据量、行高、列宽自动计算。
          height: 0,
          disableAnchor: true,
          colWidth: 40,
          rowHeight: 30,
          rowHeaders:true,
          colHeaders:true,
          maxNum:20,

          mergeCells: [
            { row: 1, col: 1, rowspan: 3, colspan: 3 },
            { row: 3, col: 4, rowspan: 2, colspan: 2 },
            { row: 5, col: 6, rowspan: 3, colspan: 2 }
          ],
          data
  };
  
  meta2d.addPens([pen],true,true);

Copy

交互操作

1. 移动

画布编辑模式时，表格默认是编辑状态。

2. 合并单元格/取消合并

3. 增加/删除行/列

4.调整列宽