【vue-plugin-hiprint】常见问题汇总③

【vue-plugin-hiprint】系列文章已发布9篇啦🌈！ 本篇主要罗列各位小伙伴使用过程中的一些常见问题③。主要涉及「表格」元素。希望对你们有所帮助😄。

前言

续接上文【vue-plugin-hiprint】常见问题汇总②。希望这三篇文章，对使用此插件的码友们有所帮助，少踩一些坑。

能够愉快的集成打印功能😊。

26 如何合并表格列/行？

1. 合并表格表头

在provider或者模板json中预制表格头。如下代码：

// provider中定义
{
  tid: "defaultModule.table"
  // 二维数组，定义多行表头 
  colums: [
    // 第一行表头
    [
      {
        title: "行号",
        rowspan: 2, // 合并的行数
        field: "id",
        width: 70
      },
      {title: "人员信息", colspan: 2 // 合并的列数},
      {title: "销售统计", colspan: 2 // 合并的列数}
    ],
    // 第二行表头
    [
      {title: "姓名",field: "name", width: 100},
      {title: "性别",field: "gender", width: 100},
      {title: "销售数量",field: "count",width: 100},
      {title: "销售金额",field: "amount",width: 100}
    ]
  ]
}

模板json中同上一样，定义colums这个二维数组即可。

注意：表格填充数据以最下一层设置的 field 为准

1. 合并表格表体

这个相对来说要复杂一点。使用行/列合并函数处理每一行/列的span 以达到合并效果。

举个例子：假设这里有个 4 行 4 列的表格。如这个：

// 表格数据： [1,1] 代表 rowspan,colspan
[1,1] [1,1] [1,1] [1,1]
[1,1] [1,1] [1,1] [1,1]
[1,1] [1,1] [1,1] [1,1]
[1,1] [1,1] [1,1] [1,1]
// 如果要合并 每 2 行 的 第 1 列
// 那么要就需要变成
[2,1] [1,1] [1,1] [1,1]
[0,1] [1,1] [1,1] [1,1]
[2,1] [1,1] [1,1] [1,1]
[0,1] [1,1] [1,1] [1,1]
// 如果要合并 每行 的 前 2 列
// 那么要就需要变成
[1,2] [1,0] [1,1] [1,1]
[1,2] [1,0] [1,1] [1,1]
[1,2] [1,0] [1,1] [1,1]
[1,2] [1,0] [1,1] [1,1]

如上方的矩阵图，我们需要设置要合并的行/列数，然后将其跟随的行/列设置成0。

当你不清楚，到底是怎么回调的时候，console.log 观察返回的数据。 你需要清楚，它是先渲染的行、还是列

1. 实现第一种情况 合并 每 2 行 的 第 1 列

// 行/列 合并函数
{
  rowsColumnsMerge:function (data, row, colIndex, rowIndex) {
    console.log('data', data);
    console.log('row', row);
    console.log('colIndex', colIndex);
    console.log('rowIndex', rowIndex);
    // 返回一个数组,参数一为行(rowspan)合并数,参数二为列(colspan)合并数, 被合并的行或者列值设为0
    if (rowIndex%2 == 0) { // 0、2、4 行
      if (colIndex == 0) { // 1列
        // 设置合并的 行/列 数量
        return [2, 1]
      }
      return [1, 1]
    } else {
      // 1、3 行
      if (colIndex == 0) { // 1列
         // 被合并的 行/列 设置为 0
        return [0, 1]
      }
      return [1, 1]
    }
  }
}

1. 实现第二种情况 合并 每行 的 前 2 列

// 行/列 合并函数
{
  rowsColumnsMerge:function (data, row, colIndex, rowIndex) {
    console.log('data', data);
    console.log('row', row);
    console.log('colIndex', colIndex);
    console.log('rowIndex', rowIndex);
    // 返回一个数组,参数一为行(rowspan)合并数,参数二为列(colspan)合并数, 被合并的行或者列值设为0
    if (colIndex == 0) { // 第1列
      return [1, 2]
    } else if (colIndex == 1) { // 第2列
      return [1, 0]
    } else {
      return [1, 1]
    }
  }
}

27 表格分栏显示？

同样的表格结构，想左边显示一个，右边显示一个。这种情况，仅需设置2个参数即可：

1. 一行多组（gridColumns）
2. 一行多组间隔 （gridColumnsGutter）

如看效果图：

28 表格自动补全/最大行数限制？

有时分栏显示了，数据总是少那么一两行，不够美观。怎么办呢？

自动补全功能是将剩余位置填满空白行。 最大行数功能就是每页限制填充的数据行数。

看效果：

29 表格分页多余空白问题？

这种情况主要原因是：分页计算的 tr 高度 与实际渲染的 tr 高度不一致导致的。

那么为什么高度不一致呢？ 原因有大概有几种情况：

1. 表格行内的元素/文本自动换行导致
2. 样式污染导致
3. 计算机分辨率设置了缩放导致

具体原因具体分析。如果是第 1 种，可以尝试固定表体行高。如图：

第 2 种，就需要自行检查，有没有全局 tr/td 这种固定高度，边距之类的全局样式。

第 3 种，检查计算机是否有缩放配置。

最终原因都是因为计算高度与渲染高度不一致导致的。

30 表格列渲染二维码/图片？

一些特殊场景，就有这种情况。设置也非常简单，如下图：

注意：图片中的单元格高度仅针对字段类型为二维码、条形码、图片才起作用。

31 表格列自定义渲染？

二维码、图片这些的已经满足不了的情况，就可以使用单元格渲染函数来自行处理，渲染的样式。 比如我们要想渲染一个进度条的效果：

// 表格 列 对象
{
  title: "数量",
  field: "count",
  renderFormatter: function(value,row,index,options){ return `<input type="range" value="${value}" max="800"></input>`; }
}

效果如下：

32 表格脚/聚合函数？

早期版本没有聚合函数的时候，只有自定义表格脚函数。原理同自定义渲染一样，返回tr中的td 即可。

有了聚合函数，一些简单的场景，就不需要那么麻烦了，设置这几个参数即可搞定。如下图：

这个函数是设置在表格列对象的。可以设置计数、合计、平均值、最大值、最小值、仅文本。同时也可以设置对齐方式，是否显示标题、转大小数字、合并等等。

注意：聚合函数优先于表格脚函数。可同时设置。合并列，需要将其后续的合并设置为0。

表格脚函数返回 tr td 标签即可。如：

// 表格对象
{
  footerFormatter: function(options,rows,data,pageData){
    // 设计时，是没有 打印数据的
    return data&&data["totalCap"]?`<td style="padding:0 10px" colspan="100">${"应收金额大写: "+data["totalCap"]}</td>`:'<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
  },
}

33 表格分组头/脚格式化函数？

这个功能是3个函数关联使用。大概场景就是根据多个字段分组，然后给每个组，渲染显示一个头/脚统计行。如图：

其中分组字段函数返回的就是分组依据，一个字段名数组。

34 多组表格脚函数？

这个功能，同的甚少。主要是用于 27 点中的 表格分栏显示。首先我们随便写写测试看看效果：

由上几张图，可见效果。至于何时使用，取决于各位需要打印的效果了。

35 表格行特殊样式？

譬如当这一行某个值，大于等于某个值的时候，想特殊显示的场景。那么就可以使用行样式函数。又或者，每一行自定义样式，斑马条纹等等情况。

// 表格 对象
{
  rowStyler: function(value,options) {
    if (value.count>=200) {
      return {'background':'red','color':'white'}
    }
  }
}

效果如下：

总结

想要的打印的效果多种多样，我们需要去实践测试观察现有参数/函数能够实现的效果。各个函数的依据是什么，它需要什么数据才能实现等等。

实践是唯一的真理。犯错总比什么都不做要好得多。

欢迎各位码友转发及留言反馈，觉得不错就点个赞再走咯~