行内过滤表格参照RefFilterTable
何时使用
行内过滤表格参照
如何使用
$ ynpm install ref-filter-table --save引入import RefFilterTableBaseUI from 'ref-filter-table'或者import
代码演示
分类
RefFilterTableBaseUI（默认）
表格参照的纯ui，需要正确的参数传入。
RefFilterTableWithInput
带文本框的参照弹出窗。
API
RefFilterTableBaseUI（默认）
以下参数为 <RefFilterTableBaseUI/>需要使用的，为了保证功能的正常使用请传入。
| 参数 | 类型 | 默认值 | 说明 | 必选 |
|---|---|---|---|---|
| className | string |
空 | 参照class样式，作用于弹出层的样式，默认为空。 | 否 |
| title | string |
空 | 打开上传的模态框显示的标题文字 | 否 |
| backdrop | bool |
true | 弹出层是否有模态层，true 显示，false 不显示 | 否 |
| lang | string |
zh_CN |
多语配置。取值范围[en_US,zh_TW,fr_FR,de_DE,ja_JP,zh_CN] | 否 |
| buttons | object |
- | {buttons:{cancelText:'取消',clearText:'清空已选',okText:'确认'}} 按钮文字展示 | 否 |
| emptyBut | bool |
false | 清空按钮是否展示 | 否 |
| miniSearch | Boolean |
true | 默认是简单搜索 | 否 |
| size | String |
'lg' | modal的size | 否 |
| valueField | string |
'refcode' | 待提交的 value 的键。 | 否 |
| searchFilterInfo | function(value) |
复杂搜索的查询回调，将搜索条件带回 | 否 | |
| showLoading | bool |
false | 是否展示loading，多用于请求中 | 否 |
| *filterColumn | Array |
-- | 过滤条件。具体使用请参照bee-table | 否 |
| *onFilterChange | function(field,value,condition) |
-- | 触发过滤输入操作以及下拉条件的回调 | 否 |
| *onFilterClear | function(field) |
-- | 清除过滤条件的回调函数，回调参数为清空的字段 | 否 |
| *tableData | Array |
— | 表体数据 | 否 |
| *columsData | Array |
— | 表头数据 | 否 |
| pageCount | number |
— | 总页数 | 否 |
| currPageIndex | number |
— | 当前页数 | 否 |
| totalElements | number |
— | 一共多少条 | 否 |
| dataNumSelect | function(index,pagesize) |
— | 选择每页多少条的回调函数 | 否 |
| handlePagination | function(currenIndex) |
— | 切换页的方法 | 否 |
| showModal | bool |
false | 是否展示参照 ，true显示，false不显示 | 否 |
| onSave | function(value) |
-- | 参照确定的回调 | 否 |
| onCancel | function(value) |
-- | 参照取消的回调 | 否 |
| value | string |
空 | 默认值，初始化input框值 | 否 |
| matchData | Array |
[] | 选中的节点，macthData和value配合使用，当value中refpk不为空且matchData有值，选中节点从matchData中获取 | 否 |
| theme | String |
'ref-red' | 参照主题，现在就两种选择'ref-red'或者'ref-blue' | 否 |
RefMultipleTableWithInput
除了使用上述的参数（showModal不可使用）还可以使用以下参数。
| 参数 | 类型 | 默认值 | 说明 | 必选 |
|---|---|---|---|---|
| wrapClassName | string |
空 | 文本框的class样，默认为空。 | 否 |
| placeholder | string |
空 | 文本框的 placeholder | 否 |
| style | object |
{width:200} | 文本框的style，默认宽度200px | 否 |
| filterUrl | string |
空 | 快捷录入接口。 | 否 |
| filterUrlFunc | function(value) |
()=>{} | 必须配合filterUrl使用，当filterUrl为空或者不传入，才会回调filterUrlFunc | 否 |
| filertData | Array |
[] | 必须配合filterUrl使用，当filterUrl为空或者不传入，才会使用filterData | 否 |
| displayField | string 或 function |
'{refname}' | 记录中显示的内容的格式。 当为字符串时则会根据 {}包裹的增则匹配替换。如： {refname}当为函数时则需自定义返回内容，参数为迭代已选择的记录。 如： displayField: (record)=> ${record.refname}-${record.refname}，是input展示value |
否 |
| valueField | string |
'refcode' | 待提交的 value 的键。 | 否 |
| value | string |
空 | 默认值，例如 '{"refname":"初级-T1","refpk":"level1"}'。初始化input框值，搭配上面的matchData初始化表格选中数据 |
否 |
| disabled | bool |
false | 禁用整个参照 | 否 |
| onChange | function(values, record) |
-- | value改变、快捷录入和保存时数据回调 | 否 |
| canClickGoOn | function() |
()=>{return true} | 当点击文本框右侧弹出按钮时是否打开modal 适用于级联情况下当选择不全时的处理 |
否 |
| canInputGoOn | function() |
()=>{return true} | 当点击文本框触发快捷录入时是否可以录入 适用于级联情况下当选择不全时的处理 |
否 |