ref-table
v0.0.8
Published
表格参照
Downloads
10
Readme
ref-table 表格参照
表格参照
代码演示
$ npm install ref-table --save
或
$ ynpm install @yonyou/ref-table --save
引入
import {RefTable, RefTableWithInput, createRefTable} from 'ref-table';
或
import {RefTable, RefTableWithInput, createRefTable} from '@yonyou/ref-table';
树形参照分类为下列三种
RefTable
参照弹出窗,没有输入框,使用时可根据自己需要定义具体的文本框。
RefTableWithInput
带文本框的参照弹出窗。在 RefTable 基础上封装实现。
createRefTable
非 ReactJS 调用方式,与 RefTable 相同没有输入框,使用时可根据自己需要定义具体的文本框。
类型说明
组件类型 |说明 ---|--- RefTable|参照弹出窗,没有输入框,使用时可根据自己需要定义具体的文本框。 RefTableWithInput|带文本框的参照弹出窗。在 RefTable 基础上封装实现。 createRefTable|非 ReactJS 调用方式,与 RefTable 相同没有输入框,使用时可根据自己需要定义具体的文本框。
API
参数 | 类型 |默认值| 说明 | 必选
---|---|--- | --- | ---
title |string
|空 |打开上传的模态框显示的标题文字 | 否
className |string
|空 | 参照class样式,作用于弹出层和 RefTableWithInput 输入框的样式,默认为空。 | 否
searchable |bool
|true |是否显示搜索框,弹出层是否带有搜索框,true 显示,false 不显示。 | 否
emptyBtn |bool
|true |是否显示清空按钮,true 显示,false 不显示 | 否
multiple |bool
| false |是否单选, true 单选,false 多选 | 否
backdrop |bool
| true |弹出层是否有模态层,true 显示,false 不显示 | 否
buttons |object
| okText
: "确认", //确认按钮cancelText
: "取消", //取消按钮clearText
: "清空已选" //清空已选按钮|弹出层工具栏三个按钮的文字,若 bottomButton 为 false 则该配置无效。| 否
bottomButton |bool
|true | 是否显示弹出层下边框工具栏, false 不显示 true 显示注意该属性为临时兼容配置后期可能随时会弃用
| 否
hasPage |bool
|true |是否有分页条,true 有,false 没有 | 否
tabData |array
|true |当参照有多个类型的数据时可启用tab标签页来区分,当个点击页签的时候,会根据配置的key再去查询。如:[{"title":"常用","key":"commonUse"}, {"title":"全部","key":"total"},{"title":"推荐","key":"recommed"}] | 否
param |objecet
|{} |接口请求参数 | 是
refModelUrl |object
|{tableBodyUrl:'',tableBarUrl:''} |弹出层数据接口地址,为了兼容其他参照保留了多连接配置。如:{ tableBodyUrl:'blobRefTableGrid',//表体请求tableBarUrl:'refInfo',//表头请求} | 是
onSave |function( record:object )
|-- |保存回调函数,返回已选择的记录详细数据。 | 否
onCancel |function( )
|-- |关闭弹出层 | 否
RefTableWithInput 增量 API
注意:以下参数为 <RefTableWithInput/>
独有。对其他两个类型的引用无效。
参数 | 类型 |默认值| 说明 | 必选
---|---|--- | --- | ---
displayField |string 或 function|'{refname}' |记录中显示的键。当为字符串时则会根据{}
包裹的增则匹配替换。如:'人员姓名:{refname},编号:{refcode}'
当为函数时则需自定义返回内容,参数为迭代已选择的记录。如:displayField: (record)=> ${record.refname}-${record.refname}| 否
valueField |string
|'refcode' |待提交的 value 的键。 | 否
checkedArray|array
|[]|已选的数据详细记录,此配置为本地配置不做缓存不做服务器校验。|否
matchUrl| ``string``|空|查询并校验 checkedArray 中的 valueField 对应参照的详细记录。|否
rules|
array|[]|表单校验规则,参考 rc-from,或使用的 from 组件具体的校验规则写法。
如: rules:[{required: true, message: '请选择该引用',}]|否
form|form:object
|{}|当前表单的 form 对象。|否.
参数详解
eg:
checkedArray:
//需要组装出详细记录,但只要保证 displayField 和 valueField 所标记的字段存在即可, 如:
[
{ "refpk": "857c41b","refcode": "wujd", "refname": "吴惊道" },
{ "refpk": "65c2c42", "refcode": "ms", "refname": "马帅" }
]
开发调试
$ cd
ac-refer/packages/ref-table
$ npm install
$ npm run dev