Lov 弹出选择输入框

大数据值集取值表单控件,弹出选择输入框。

何时使用

当用户需要从大数据列表中取值。

需结合后端值集接口,配置对应字段属性。相关教程: Lov

代码演示

数据源

绑定数据源。

Lov弹出选择输入框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Lov, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. autoCreate: true,
  17. fields: [
  18. {
  19. name: 'code',
  20. textField: 'code',
  21. type: 'object',
  22. lovCode: 'LOV_CODE',
  23. lovPara: { code: '111' },
  24. required: true,
  25. },
  26. {

多值

通过属性multiple设置为多值。

Lov弹出选择输入框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Lov } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset multiple]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. primaryKey: 'code',
  17. autoCreate: true,
  18. fields: [
  19. {
  20. name: 'code',
  21. type: 'object',
  22. lovCode: 'LOV_CODE',
  23. multiple: true,
  24. required: true,
  25. defaultValue: ['Mock'],
  26. },

LOV级联

LOV 级联。

Lov弹出选择输入框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Lov, Select, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, value, oldValue }) {
  5. console.log(
  6. '[dataset newValue]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. '[record.toJSONData()]',
  11. record.toJSONData(),
  12. );
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. fields: [
  17. {
  18. name: 'mySex',
  19. type: 'string',
  20. label: '性别',
  21. lookupCode: 'HR.EMPLOYEE_GENDER',
  22. },
  23. {
  24. name: 'code',
  25. type: 'object',
  26. label: 'LOV',

按钮

按钮。

Lov弹出选择输入框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Lov, Output, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. autoCreate: true,
  17. fields: [
  18. {
  19. name: 'code',
  20. type: 'object',
  21. lovCode: 'LOV_CODE',
  22. lovPara: { code: '111' },
  23. required: true,
  24. },
  25. {
  26. name: 'code_string',
  27. type: 'object',
  28. lovCode: 'LOV_CODE',
  29. required: true,
  30. },
  31. { name: 'code_code', type: 'string', bind: 'code.code' },

API

参数说明类型默认值
modalProps弹窗属性,详见ModalPropsobject
tableProps表格属性,详见TablePropsobject
triggerMode触发弹窗模式,可选值: icon | inputstringicon
noCache弹窗时自动重新查询string| booleanfalse
mode显示模式,可选值: default | buttonstringdefault
searchMatcher搜索器。当为字符串时,作为 lookup 的参数名来重新请求值列表。string | ({ record, text, textField, valueField }) => boolean({ record, text, textField }) => record.get(textField).indexOf(text) !== -1
paramMatcher参数匹配器。当为字符串时,进行参数拼接。string | ({ record, text, textField, valueField }) => string
lovEventsLov 数据源 DataSet Events。Events

更多属性请参考 TextField, Button