FastCrud

Appearance

FastTableOption ​

FastTableOption是FastCrud自定义的类，其构造参数是一个对象类型。示例如下：

js
import {FastTableOption} from "fast-crud-ui3";

const tableOption = new FastTableOption({
    // 在这里提供FastTable支持的丰富配置项
    module: ''
})

TIP

FastTableOption必须配合FastTable组件使用

FastTableOption配置项 ​

属性说明类型默认值
context当前组件的引用，一般配this。否则，在钩子函数中无法正常获取当前组件数据或方法Component-
id(1.5.2+)表格id,应当保证同站点唯一。此值将用于FastTable在localStorage中存储某些数据时标识唯一性String${baseUrl}
title表格标题名。配置后将显示在表格上方String-
showTitle(1.5.9+)是否显示表格标题(也得title有值)Boolean/Function<() => Boolean>true
module模块，也即后端接口的根path。(@deprecate 1.6, 使用baseUrl代替)String-
baseUrl(1.5.2+)其它接口url的根pathString${module}
pageUrl分页接口地址。如需自定义则配置String${baseUrl}/page
listUrl列表接口地址。如需自定义则配置String${baseUrl}/list
insertUrl新增接口地址。如需自定义则配置String${baseUrl}/insert
batchInsertUrl批量新增接口地址。如需自定义则配置String${baseUrl}/insert/batch
updateUrl更新接口地址。如需自定义则配置String${baseUrl}/update
batchUpdateUrl批量更新接口地址。如需自定义则配置String${baseUrl}/update/batch
deleteUrl删除接口地址。如需自定义则配置String${baseUrl}/delete
batchDeleteUrl批量删除接口地址。如需自定义则配置String${baseUrl}/delete/batch
uploadUrl上传接口地址。如需自定义则配置String${baseUrl}/upload
exportUrl导出接口地址。如需自定义则配置String${baseUrl}/export
existsUrl(1.5.12+)存在性校验地址(列启用唯一性校验时会用到)。如需自定义则配置String${baseUrl}/exists
enableDblClickEdit启用双击编辑Boolean/Function<() => Boolean>true
enableMulti启用多选Boolean/Function<() => Boolean>true
enableIndex(1.5.9+)启用序号列Booleanfalse
enableColumnFilter启用列动筛。若设置false则所有列不支持表头点击筛选Boolean/Function<() => Boolean>true
enableFilterCache(1.5.13+)启用筛选缓存(会话有效)Boolean/Function<() => Boolean>true
lazyLoad分页数据延迟加载。若设置true则表格渲染后不会自动加载数据，得人为触发Booleanfalse
editType双击编辑时默认的编辑形式。"inline"表示表格行内编辑, "form"表示弹窗表单Stringinline
insertable是否可新增。若为false则关闭所有新增入口Boolean/Function<() => Boolean>true
updatable是否可更新。若为false则关闭所有更新入口Boolean/Function<() => Boolean>true
deletable是否可删除。若为false则关闭所有删除入口Boolean/Function<() => Boolean>true
exportable(1.5.12+)是否可导出。若为false则关闭导出入口Boolean/Function<() => Boolean>true
idField(1.5.12+)主键字段,默认为id(列组件配置unique时必须指定)。Stringid
createTimeField创建时间字段。若配置则激活内置存筛String-
sortField排序字段(默认取createTimeField或idField)String${createTimeField}、${idField}
sortDesc是否倒序Booleantrue
style表格样式。详见styleObject-
conds分页内置条件, 用户无法取消。详见condsArray[]
condGroups(1.5.2+)开发预置的存筛筛选组。详见condGroupsArray[]
condExtra(1.5.12+)扩展筛选字段。详见condExtraObject{}
moreButtons"更多"下拉按钮的扩展配置。详见moreButtonsArray-
pagination分页配置。参考Element即可Object{layout: 'total, sizes, prev, pager, next, jumper','page-sizes': [10, 20, 50, 100, 200],size: 10}
beforeReset【钩子】搜索重置前执行。返回reject则阻断重置Function<({query}) => Promise>({query}) => Promise.resolve()
beforeLoad【钩子】分页请求前执行。返回reject则阻断分页请求，可针对查询条件进行扩展Function<({query}) => Promise>({query}) => Promise.resolve()
loadSuccess【钩子】分页请求成功后执行。可针对响应数据进行显示前的二次处理(必须resolve数据)Function<({query, res}) => Promise>({query, res}) => Promise.resolve(res)
loadFail【钩子】分页请求失败后执行。返回reject则阻断内置错误提示Function<({query, error}) => Promise>({query, error}) => Promise.resolve()
beforeToInsert【钩子】新增状态激活前执行。返回reject则阻断进入新增状态。可定制某些字段新增时默认值(必须返回resolve)Function<({rows}) => Promise>({rows}) => Promise.resolve()
beforeInsert【钩子】新增保存前执行。返回reject则阻断保存提交。可实现特殊逻辑校验。Function<({fatRows, rows, editRows}) => Promise>({fatRows, rows, editRows}) => Promise.resolve(editRows)
insertSuccess【钩子】新增保存成功后执行。返回reject则阻断内置成功提示Function<({fatRows, rows, editRows, res}) => Promise>({fatRows, rows, editRows, res}) => Promise.resolve()
insertFail【钩子】新增保存失败后执行。返回reject则阻断内置错误提示Function<({fatRows, rows, editRows, error}) => Promise>({fatRows, rows, editRows, error}) => Promise.resolve()
beforeToUpdate【钩子】更新状态激活前执行。返回reject则阻断进入编辑状态Function<({fatRows, rows}) => Promise>({fatRows, rows}) => Promise.resolve()
beforeUpdate【钩子】更新保存前执行。返回reject则阻断保存提交。可实现特殊逻辑校验Function<({fatRows, rows, editRows}) => Promise>({fatRows, rows, editRows}) => Promise.resolve(editRows)
updateSuccess【钩子】更新成功后执行。返回reject则阻断内置成功提示Function<({fatRows, rows, editRows, res}) => Promise>({fatRows, rows, editRows, res}) => Promise.resolve()
updateFail【钩子】更新失败后执行。返回reject则阻断内置失败提示Function<({fatRows, rows, editRows, error}) => Promise>({fatRows, rows, editRows, error}) => Promise.resolve()
beforeDeleteTip【钩子】删除提示前执行。返回reject则阻断提示弹窗及后续操作Function<({fatRows, rows}) => Promise>({fatRows, rows}) => Promise.resolve()
beforeDelete【钩子】删除请求前执行。返回reject则阻断删除请求，否则必须resolve数据Function<({fatRows, rows}) => Promise>({fatRows, rows}) => Promise.resolve(rows)
deleteSuccess【钩子】删除成功后执行。返回reject则阻断内置成功提示Function<({fatRows, rows, res}) => Promise>({fatRows, rows, res}) => Promise.resolve()
deleteFail【钩子】删除失败后执行。返回reject则阻断内置失败提示Function<({fatRows, rows, error}) => Promise>({fatRows, rows, error}) => Promise.resolve()
beforeCancel【钩子】取消前——即退出新增或更新状态前执行。返回reject则阻断退出新增或更新状态Function<({fatRows, rows, status}) => Promise>({fatRows, rows, status}) => Promise.resolve()
beforeExport【钩子】导出请求前执行。返回reject则阻断导出Function<({columns, pageQuery}) => Promise>({columns, pageQuery}) => Promise.resolve()
exportSuccess(1.5.1+)【钩子】导出成功后执行Function<({columns, pageQuery, data}) => Promise>({columns, pageQuery, data}) => Promise.resolve()
exportFail(1.5.1+)【钩子】导出失败后执行。返回reject则组件内置失败提示Function<({columns, pageQuery, data}) => Promise>({columns, pageQuery, data}) => Promise.resolve()
render渲染函数。用于渲染FastTable子组件Function<() => []>() => []

style ​

style是FastTableOption中定义表格“外貌”的配置项，它是一个Object类型，其下具体配置如下:

属性说明类型默认值
flexHeight表格是否使用弹性高度。为true则自适应高度, 撑满父容器Booleanfalse
bodyRowHeight表格行高String50px
size尺寸。将影响表格内所有相关控件，取值参考ElementStringdefault
formLabelWidth表单标签宽度。影响范围: 弹窗表单、快筛表单Stringauto
formLayout弹窗表单的字段布局, 例如:id,avatarUrl,name|age|sex,createTime表示第一行是id和avatarUrl各占50%,第二行是name、age、sex各占33.3%, 第三行是createTime独占一行String-
quickFilterToggle(@remove 1.5.9)快筛项过多时，是否折叠Booleanfalse
quickFilterToggleExceed(@remove 1.5.9)quickFilterToggle为true时, 快筛项多于此值时产生"收缩/展开"Number4
quickFilterSpan快筛表单的布局, 表示每行几个筛选项(也就是几列),值为auto时表示自动调整(1.5.18+支持auto值)Number|'auto'3
quickFilterGridGap(1.5.9+)快筛表单项的间隙, 同grid布局中的gapString10px 20px

conds ​

conds接受一个数组，如下:

js
conds: [{col: 'name', opt: '=', val: '曹操'}] // 此时opt可以省略
// 或
conds: new Cond('name', '=', '曹操') // 此时第二个参数opt不能省略

关于opt的取值详见Cond

condGroups ​

开发者可以通过此配置项预置一个或多个存筛(即筛选组)，这些存筛项目，用户无法修改和删除。condGroups接受一个数组，数组中的配置项如下:

属性说明类型默认值
label组合名, 存筛项下拉处显示名, 应保证唯一且尽量言简意赅String-
conds条件组，详见上面的condsArray-

WARNING

在迭代过程中, FastTable可能会不断变化, 某个筛选属性可能以前有，现在没了，也记得调整此condGroups值，否则这个存筛项会被标记为不兼容，呈现禁用状态。

condExtra ​

这个配置项是用来给开发者预留的扩展搜索条件。不难发现，当前简筛、快筛、存筛、动筛，都有一个局限性：底层的基本逻辑都是基于表格列字段进行过滤的。试想，很可能你会需要一个搜索入参——它 可能不是基于当前表格某个列搜索的，甚至可能和当前表格一点关系没有。这时可以在此配置项中定义一个字段，例如:

js
new FastTableOption({
    ...,
    condExtra: {
        keyword: null
    }
})

然后，在#quickFilter插槽(详见: FastTable插槽)中自定义一个筛选控件, 绑定此值。而后端可以轻易地在分页接口的入参中获取此keyword值，实现其特有的逻辑。

moreButtons ​

moreButtons是针对"更多"下拉按钮的扩展配置，这个配置项接受一个数组，数组中的配置项如下:

属性说明类型默认值
icon图标组件, 建议用markRaw处理Component-
label显示名String-
click点击后触发的函数回调,通过scope参数可以获取到表格中选中、勾选等数据Function<(scope) => void>-
showable是否显示Boolean/Function<(scope) => Boolean>true
disable是否禁用Boolean/Function<(scope) => Boolean>true