Administrator
Administrator
发布于 2025-01-03 / 78 阅读
0
0

Fast-Crud前端——FastTableColumn*

fast-table 是FastCrud的核心组件, 而fast-table-column*就是第二核心,针对Fast-Crud前端组件库的使用,主要是对fast-tablefast-table-column*的使用。

完整的FastTableColumn*

组件名

常用公共配置项

常用配置项

备注

FastTableColumn

  • prop: 属性名,同原生

  • label: 显示名,同原生

  • filter: boolean, 是否可筛选(快筛、简筛、动筛同时有效)

  • quick-filter: boolan, 是否快筛项

  • quick-filter-block: 存在则表示快筛中,此项将独占一行

  • first-filter: 存在则表示动筛、简筛中,此项将排在前面展示。

  • editable: boolean | Function<{row, editRow, status, config, col}> => boolean 当前列是否可编辑,如果是函数则必须返回boolean类型,可实现动态控制单元格能否编辑

  • default-val: any, 默认值

  • required: boolean, 是否必填

  • rules: array, 表单校验规则,同原生

其它el-table-column支持的配置项均支持(例如 width, fixed等)

-

只读列,无论如何无法行内编辑。

FastTableColumnInput

-

FastTableColumnTextarea

-

FastTableColumnNumber

  • min: 最小值

  • max: 最大值

  • step: 步长

FastTableColumnSelect

  • options: array, 可支持的选项,为对象数组

  • val-key: string, 标识选项中作为值的键名, 默认为value

  • label-key: string, 标识选项中作为显示的键名, 默认为label

  • disable-val: array, 禁用的选项值。

  • quick-filter-checkbox: 存在则表名快筛中呈现为checkbox group,而不是下拉

FastTableColumnSwitch

  • active-value: switch打开时的值

  • inactive-value: switch关闭时的值

  • active-text: switch打开时的显示文字

  • inactive-text: switch关闭时的显示文字

FastTableColumnDatePicker

  • type: 显示类型,同原生,多数为date或datetime

  • value-format: 可选,绑定值的格式。同原生

  • picker-options: 当前时间日期选择器特有的选项。同原生

  • default-time: 范围选择时选中日期所使用的当日内具体时刻,同原生。一般可能为 ['00:00:00', '23:59:59']

FastTableColumnTimePicker

  • value-format: 同原生

  • default-value: 同原生

FastTableColumnImg

  • limit: 限制上传的数量,默认1,默认单文件

  • response-handler: Functio(res, file, fileList), 上传成功后的回调,必须解析出并返回url地址,如果使用自定义的上传接口,可能需要配置此项,或自定义后端接口响应包装类,也可能需要配置此项正确解析url。

FastTableColumnFile

FastTableColumnObject(1.1.2+)

  • table-option: FastTableOption或Function<FatRow,column,$index> => FastTableOption,必须定义render,将会根据此渲染弹窗的表单用于pick对象。

  • show-field: String, 表示pick的对象中哪个字段的值回显到单元格控件上。

  • pick-map: Object, 表示pick的对象所有要回写到当前表格行中的字段,key是pick对象中的属性名,value是当前表格的属性名,如果只需要回写当前属性,只配置show-field也可以。

  • value-convert: Function<pickData,showField> => Any, 针对showField取值的值转换, 对于多选时, 会讲showField的多个值用英文逗号分隔后返回,作为组件v-model值。

  • before-open: Function<> => Promise, 返回reject可不打开pick弹窗。

  • title: String, 打开的pick弹窗的标题

  • multiple: Boolean, pick是否多选。这个一般用的比较少,在FastTableColumnObject里都是在某个属性上去pick,基本上都是pick一个对象。不过在pick方法常常可能多选。

  • appendToBody: 弹窗是否加到body

  • clearable: Boolean, 是否可清空,默认是,清空时会将pickMap声明的其它属性一并设置为null(1.1.3+)

特别说明

  1. 所有的FastTableColumn*都是基于ElTableColumn + 编辑控件(直接或间接使用原生ElementUI对应的控件), 因此针对原生输入控件的配置项,若无特殊说明,也可以直接加在FastTableColumn*上。

  2. 同样你也可以直接使用原生的ElTableColumn,只是如果是数据列,由于row被封装成fatRow, 因此需要处理下显示。

  3. 有些配置项,例如default-val、disable-val等,配置将同时生效于新增时和查询时,该如何分别定制呢?小技巧就是通过给配置项加后缀,例如: default-val_q, 那么此项仅仅对查询生效; 再如: default-val_e, 那么此项仅仅对编辑生效。此技巧对于所有作用于控件(而非ElTableColumn)的属性均适用。


评论