fast-table
是FastCrud的核心组件, 而fast-table-column*
就是第二核心,针对Fast-Crud前端组件库的使用,主要是对fast-table
和fast-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 | | |
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+ )
| |
特别说明
所有的FastTableColumn*都是基于ElTableColumn + 编辑控件(直接或间接使用原生ElementUI对应的控件), 因此针对原生输入控件的配置项,若无特殊说明,也可以直接加在FastTableColumn*上。
同样你也可以直接使用原生的ElTableColumn,只是如果是数据列,由于row被封装成fatRow, 因此需要处理下显示。
有些配置项,例如default-val、disable-val等,配置将同时生效于新增时和查询时,该如何分别定制呢?小技巧就是通过给配置项加后缀,例如: default-val_q, 那么此项仅仅对查询生效; 再如: default-val_e, 那么此项仅仅对编辑生效。此技巧对于所有作用于控件(而非ElTableColumn)的属性均适用。