表格配置区域划分 将左侧表格模板拖动到中间区域则显示上方内容,可通过点击左侧配置区域的树状图节点或者点击中间表格区域的不同的虚线框部分对当前表格页面进行配置。下面对各区域进行介绍。
1、全部
表格模板拖动机中间区域后默认的配置区域为「全部」,即表格的整体配置。
- 接口选择: 三种接口类型,固定配置、表接口、代码生成。通过
查看接口详情
按钮,查看接口类型下接口的路径。 - 自定义页面路径: 填写页面上自定义部分内容所在 views 下的文件夹名称,不填写则默认为 template 文件夹。
- 紧凑模式: 开启紧凑模式则表格单元格的行高缩小,页面可尽可能多的展示内容。
- 配置字段: 点击
配置字段
按钮,显示下方弹窗,可对表格的字段信息进行配置。点击
添加行
按钮,添加表格字段数据 - 字段名称: 填写字段名称,即为接口返回数据的字段名称。
- 字段类型: 点击下拉选择框选择当前字段的字段类型,有文本输入、下拉选择、single 弹窗、日期、日期范围等。
- 字段值: 输入字段类型对应的字段值。
- ** 文本输入**: 表单类型为文本输入,可选择文本输入的字段值类型,数字、邮箱、密码、整数、正则表达式。正则表达式则填写正则表达式的值,例如:/[0-9]/
- ** 下拉选择**: 表单类型为下拉选择框,可设置单选或多选类型及下拉菜单的数据来源,数据来源可为字典数据或 api 接口数据。字典数据可填写字典类型编码;api 接口数据可填写格式为:/api/getList*key_value,通过 * 划分为三部分,第一部分为 api 接口,第二部分为 api 接口获取到的列表数据中作为传参字段的字段名,第二部分为 api 接口获取到的列表数据中作为显示字段的字段名
- ** single 弹窗**: 表单类型为 single 弹窗。选择 single 弹窗后需要配置 single 弹窗的值,例如:/api/system/user/list,userId,userName,userName,loginName,userName,createTime 参数以逗号改开,第一个参数为 api,第二和第三个参数为 key 和 value,即输入框中传参的值和显示的值,第四个参数为修改数据时从该条数据中取值的字段,从第五个及其之后的字段为弹窗中 table 表格中显示的字段,取第五个开始的前两个字段为查询字段
- 国际化 key: 默认为字段名称转为大写。设置字段的国际化显示 Key 编码,设置 Key 之后需在国际化页面设置 Key 对应的中英文显示。
2、查询区域
可点击画布中表格的查询区域进行查询区域设置
- 显示自定义查询: 是否显示自定义查询按钮。
- 查询字段: 可勾选需要展示在查询区域的字段
- 是否校验查询项:输入类型的字段会有该设置,勾选后,会校验用户的输入,校验规则在
全部
——配置字段
处进行配置。 - 查询操作符:可对该字段支持的查询操作符进行多项选择。
- 是否校验查询项:输入类型的字段会有该设置,勾选后,会校验用户的输入,校验规则在
查询区域-自定义查询
可点击表格的查询区域的
自定义查询
按钮进行设置,勾选自定义查询可选择的查询字段。
3、操作栏区域
可点击画布中表格的操作栏区域进行查询区域设置,勾选操作栏显示按钮,内置九种操作按钮,也可点击
新增按钮
添加自定义按钮。
新增按钮属性
- 按钮编码: 以 handle 开头的英文编码,例如:handleAdd,其中 Add 的大写作为显示的国际化 Key,handleAdd 为点击该自定义按钮时触发的 action 方法名。
- 按钮名称: 按钮的中文名称。
- 图标: 按钮上显示图标。
- 关联表单: 点击按钮是否显现配置的表单页面。选择
是
时,填写弹窗宽度,选择表单页面,填写表单点击确定时的回调函数名称。 - 批量操作: 按钮的可操作性是否与表格数据关联,可选择:勾选(按钮操作与表格数据有关,至少勾选一条表格数据,按钮方可操作)、不勾选(按钮操作与表格数据无关)、勾选一项(按钮操作与表格数据有关,只有勾选一条表格数据时,按钮方可操作)、一条以上(按钮操作与表格数据有关,只有勾选一条以上表格数据时,按钮方可操作)。
操作栏区域-新增
可点击画布中表格的操作栏区域的
新增
按钮进行设置,勾选新增数据时需要填写的字段以及哪些字段是必填项
操作栏区域-修改
可点击画布中表格的操作栏区域的
修改
按钮进行设置,勾选修改数据时需要修改的字段以及哪些字段是必填项,哪些字段是只读项
操作栏区域-批量修改
可点击画布中表格的操作栏区域的
批量修改
按钮进行设置,勾选修改数据时需要修改的字段以及哪些字段是必填项,哪些字段是只读项
操作栏区域-导出
可点击画布中表格的操作栏区域的
导出
按钮进行设置
- 高性能导出: 适用于数据量很大的场景。通过调用后端接口获取文件流导出为 excel 文件。
- 普通导出: 适合数据量较小的场景。通过前端插件将查询数据导出为 excel 文件。
操作栏区域-导入
可通过勾选导入选项为页面添加导入按钮。
注意
当需要校验用户导入数据,并展示未校验通过的数据时,需要在导入保存接口返回未校验通过的数据list,在有问题数据list每一个对象中添加reason属性,该属性用来描述未通过校验的原因。这样,在导入数据后点击保存时,会将有问题的数据及未通过校验的原因展示给用户,方便用户查看原因修改数据后重新上传。
操作栏区域-自定义列
可通过勾选自定义列选项为用户添加自定义列按钮,用户可通过点击自定义列进行表格列显隐及顺序的调整。
4、表格区域
可点击画布中表格部分进行表格区域设置
- 配置表格字段: 点击
配置表格字段
按钮,显示配置表格字段弹窗。- 字段名称: 勾选需要显示在表格内的字段。
- 宽度: 设置当前字段所在列的列宽。
- 对齐方式: 设置单元格内文本的对齐方式 left、center、right。
- 排序: 勾选当前字段所在列是否可排序。
- 一行省略: 设置单元格内文本是否只显示一行,超出部分省略
- 自定义单元格: 若想要通过自定义文件的方式自定义单元格的内容需要勾选。
- 列宽自适应: 开启列宽自适应后未设置列宽的字段将不会默认填加列宽,否则对未设置列宽的字段默认设置为 120px 的宽度
- 固定列: 填写表格需要在左侧或右侧固定的列数
- 表格按钮: 勾选表格操作栏显示按钮,内置修改、删除,点击
新增按钮
添加自定义按钮- 按钮编码: 以 handle 开头的英文编码,例如:handleAdd,其中 Add 的大写作为显示的国际化 Key,handleAdd 为点击该自定义按钮时触发的 action 方法名。
- 按钮名称: 按钮的中文名称。
- 其他配置: 设置表格的其他配置项
- 显示分页: 是否显示表格下分页组件,若表格无需分页则不勾选。
- 默认每页条数: 表格默认每页查询多少条数据。
- 每页显示条数: 表格右下角切换每页显示条数的选项数据,选项通过“,”间隔,例如:10,50,100,300。
- 显示勾选框: 表格每行数据前是否显示勾选框。
- 勾选栏宽度: 表格勾选栏的列宽
- 唯一键: 表格每一行的唯一键值,需保证该值的唯一性,可选择多个字段组合为唯一键值
- 操作栏宽度: 表格右侧操作栏的列宽