Lov 弹出选择输入框
大数据值集取值表单控件,弹出选择输入框。
何时使用
当用户需要从大数据列表中取值。
需结合后端值集接口,配置对应字段属性。相关教程: Lov
代码演示
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Lov, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log(
'[dataset]',
value,
'[oldValue]',
oldValue,
`[record.get('${name}')]`,
record.get(name),
);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'code',
textField: 'code',
type: 'object',
lovCode: 'LOV_CODE',
lovPara: { code: '111' },
required: true,
},
{
多值
通过属性multiple
设置为多值。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Lov } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log(
'[dataset multiple]',
value,
'[oldValue]',
oldValue,
`[record.get('${name}')]`,
record.get(name),
);
}
class App extends React.Component {
ds = new DataSet({
primaryKey: 'code',
autoCreate: true,
fields: [
{
name: 'code',
type: 'object',
lovCode: 'LOV_CODE',
multiple: true,
required: true,
defaultValue: ['Mock'],
},
LOV级联
LOV 级联。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Lov, Select, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, value, oldValue }) {
console.log(
'[dataset newValue]',
value,
'[oldValue]',
oldValue,
'[record.toJSONData()]',
record.toJSONData(),
);
}
class App extends React.Component {
ds = new DataSet({
fields: [
{
name: 'mySex',
type: 'string',
label: '性别',
lookupCode: 'HR.EMPLOYEE_GENDER',
},
{
name: 'code',
type: 'object',
label: 'LOV',
按钮
按钮。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Lov, Output, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log(
'[dataset]',
value,
'[oldValue]',
oldValue,
`[record.get('${name}')]`,
record.get(name),
);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'code',
type: 'object',
lovCode: 'LOV_CODE',
lovPara: { code: '111' },
required: true,
},
{
name: 'code_string',
type: 'object',
lovCode: 'LOV_CODE',
required: true,
},
{ name: 'code_code', type: 'string', bind: 'code.code' },
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
modalProps | 弹窗属性,详见ModalProps | object | |
tableProps | 表格属性,详见TableProps | object | |
triggerMode | 触发弹窗模式,可选值: icon | input | string | icon |
noCache | 弹窗时自动重新查询 | string| boolean | false |
mode | 显示模式,可选值: default | button | string | default |
searchMatcher | 搜索器。当为字符串时,作为 lookup 的参数名来重新请求值列表。 | string | ({ record, text, textField, valueField }) => boolean | ({ record, text, textField }) => record.get(textField).indexOf(text) !== -1 |
paramMatcher | 参数匹配器。当为字符串时,进行参数拼接。 | string | ({ record, text, textField, valueField }) => string | |
lovEvents | Lov 数据源 DataSet Events。 | Events |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .