数据表格

可以通过表格的形式展示多行数据，支持对数据进行搜索、排序、分页、行操作等功能

基础用法

拖动数据表格组件到指定位置

属性设置

数据源

数据源：配置数据表格的数据源

点击可以直接进入对应的数据源配置页面

勾选了懒加载后，只有手动刷新或者通过代码刷新数据源，默认不加载数据

表格列

数据列：配置列的格式，可以点击生成按钮根据数据源自动生成

点击编辑按钮，可以打开编辑列页面

在编辑列页面可以批量操作，操作步骤为：先选中要修改的列，再选择要批量进行的操作

在编辑列页面也可以添加多级表头，注意：只有手动添加的列才可以，快捷生成的列无法添加

效果示例

编辑列页面或者表格列配置页面点击编辑按钮，可以打开编辑表格列，这里可以对表格列进行单独配置，包括开启插槽、格式化配置等

选择列：配置列的选择逻辑

是否展示：是否显示选择列

允许多选：是否允许选择时多选

触发方式：触发选择的方式。注点击单元格和点击行会触发明细表格的单元格点击以及行点击事件

默认是点击选择框
点击单元格时点击选择框所在的单元格
点击行就是点击数据行即选择

可选规则：绑定自定义方法，校验是允许选择

示例：只能选择物料类型为电子产品的数据

效果：

跨页选择：是否能跨页选择，需要配合标识字段一起使用

标识字段：当跨页选择开启时，需要指定行数据中的某一字段作为标识字段，要求值唯一

示例：在自定义方法中获取到选中的行数据

let vm = this;
// 明细表组件ID
let compId = 'xxx';
// 获取选择的行数据列表
let list = vm.getCompRef(compId).getSelection();

序号列
- 是否展示：是否显示序号列
- 标题：序号所在列的列名
- 列宽：序号所在列的宽度

操作列

是否展示：是否显示操作列
按钮选项：允许配置操作列中的按钮
更多选项：配置更多菜单中的选项内容
列属性：配置操作按钮所在表格列的属性
- 列宽
- 更多触发方式：更多选项出现方式，默认是鼠标移入触发，也可以配置点击触发
- 隐藏更多选项：控制更多选项的显示和隐藏

表体

工具栏
- 按钮：添加或配置工具栏的操作按钮
- 功能开关
  - 快速搜索
  - 高级搜索
  - 排序
  - 展示列
  - 导出
- 高就搜索
  - 搜索方式：配置高级搜索栏打开方式。
    - 折叠面板：默认方式，需要在明细表格组件上配置高级搜索表单。
    - 组件事件：与明细表格switch-advanced-search事件和模态层搭配使用，实现以弹窗的形式打开高级搜索表单进行检索
- 导出
  - 自定义导出：开启后，需要与明细表格custom-export事件配合使用。在事件绑定方法中自定义导出内容
表体
- 行高
- 边框：是否显示边框
- 斑马纹：是否显示斑马纹
- 内容省略：单元中的内容过长时是否省略
- 单元格样式：根据行数据改编样式
  1. 定义局部样式
  2. 创建自定义方法
    示例：当行数据中的库存小于5时，返回刚刚定义的样式类名
  3. 单元格样式中绑定该方法
  4. 效果示例
虚拟滚动：当明细表格列过多，行过多，表格加载缓慢时，可以开启虚拟滚动，以提高加载效率
- 横向滚动
- 纵向滚动
表尾
- 是否显示：控制表尾的显示
- 显示类型
- 计算方法：绑定用于表尾内容
分页栏
- 是否显示：控制分页栏的显示
- 精简模式：只显示翻页按钮和页码
- 每页数据量：控制每条条数的选项
- 按钮背景：翻页按钮是否显示背景
- 是否禁用：禁用翻页

其他

树表格
表格形式展示树结构数据

开启树表格后，需要在数据源的筛选条件中添加父级字段的条件，固定写法为，$zc_scoped.parentRow.标识字段。如下图

效果

甘特图
基于表格内容生成甘特图

关联明细行转列
将关联明细表中的数据转换成表格列，合并展示
- 关联数据源：选择明细数据源
- 关联方式：左边是主数据源的标识字段，右边是明细数据源中的关联字段
- 列字段：明细数据源中要转换成列的字段
- 值字段：转换成列后，对应列中要展示内容的字段
- 列宽：生成列的列宽
- 最小列宽