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

更多属性请参考 TextField, Button。