无边框表格

其他样式报表–无边框表格

概述

无边框表格：一个没有表格边框线的表格。

应用场景

如下图所示，简单展示数据

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和Http接口数据集，Json数据如下图所示：

[{"CustomerID":"HUNGC","CompanyName":"五金机械","ContactName":"苏先生","ContactTitle":"销售代表","Address":"德昌路甲 29 号","City":"大连","Region":"东北","PostalCode":"564576","Country":"中国","Phone":"(053) 5556874","Fax":"(053) 5552376"},
{"CustomerID":"CENTC","CompanyName":"三捷实业","ContactName":"王先生","ContactTitle":"市场经理","Address":"英雄山路 84 号","City":"大连","Region":"东北","PostalCode":"130083","Country":"中国","Phone":"(061) 15553392","Fax":"(061) 15557293"},
{"CustomerID":"CACTU","CompanyName":"威航货运有限公司","ContactName":"刘先生","ContactTitle":"销售代理","Address":"经七纬二路 13 号","City":"大连","Region":"东北","PostalCode":"120412","Country":"中国","Phone":"(061) 11355555","Fax":"(061) 11354892"},
{"CustomerID":"BLONP","CompanyName":"国皓","ContactName":"黄雅玲","ContactTitle":"市场经理","Address":"广发北路 10 号","City":"大连","Region":"东北","PostalCode":"565479","Country":"中国","Phone":"(0671) 88601531","Fax":"(0671) 88601532"},
{"CustomerID":"MEREP","CompanyName":"华科","ContactName":"吴小姐","ContactTitle":"市场助理","Address":"和光北路 952 号","City":"大连","Region":"东北","PostalCode":"280235","Country":"中国","Phone":"(0514) 5558054","Fax":"(0514) 5558055"}]

报表设计

将数据字段拖入A2-G2单元格，并设置为分组(不合并单元格)以及向下扩展。
通过上方工具栏按钮设置格式。

如下图所示

效果预览

无边框表格.json

https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1700549213161-e6c295a2-006d-4380-a1c3-4b444438fc53.json

参考文档

• 小智报表样例源码下载
  • https://gitee.com/tizdata_admin/vue-xzreport-example.git
• 小智报表demo体验
  • https://xzdemo.tizdata.com/#/imbedShow/reportExample
  • 丰富的报表模板示例
• 小智报表在线试用
  • https://xzreport.com
• 小智报表js sdk下载
  • https://tizdata.com/xzdownload/
• 开发使用文档
  • https://doc.tizdata.com/xiaozhi/650