---
title: 条件选择组件
sidemenu: true
---

## 条件选择组件

条件选择组件
```tsx
/**
 * background: '#f0f2f5'
 */
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { Space } from 'antd';
import { ConditionSelect } from '@/components';
import style from './index.less'
export default () => {
  const dispatch = useDispatch();
  const defaultTableRow = {
    key: {
      mode: 'multiple', // 多选或者单选 默认单选
      disabled: true, // 禁用 select整体禁用
      options: [
        {
          label: 'key',
          value: 1,
        },
        {
          label: 'value',
          value: 2,
        },
      ],
  
    },
    operator: {
      options: [
        {
          label: 'post',
          value: 1,
          disabled: true, // 单个option禁用
        },
        {
          label: 'get',
          value: 2,
        },
        {
          label: 'delete',
          value: 3,
        },
        {
          label: 'update',
          value: 4,
        },
      ],
    },
    option: {
      width:100 // 表格项宽度option为例子
    }
  };
   const defaultTableRow1 = {
    key: {
      mode: 'multiple', // 多选或者单选 默认单选

      options: [
        {
          label: 'keyfjnfdjkgdfkglkdfgldflgkfd;lgk;dfkg;df',
          value: 1,
        },
        {
          label: 'value',
          value: 2,
        },
      ],
      width:100
    },
    operator: {
      options: [
        {
          label: 'post',
          value: 1,
          disabled: true, // 单个option禁用
        },
        {
          label: 'get',
          value: 2,
        },
        {
          label: 'delete',
          value: 3,
        },
        {
          label: 'update',
          value: 4,
        },
      ],
    }
  };
  const defaultTableRow2 = {
    key: {
      options: [
        {
          label: 'key',
          value: 1,
        },
        {
          label: 'value',
          value: 2,
        },
      ],
  
    },
    operator: {
      options: [
        {
          label: 'post',
          value: 1,
          disabled: true, // 单个option禁用
        },
        {
          label: 'get',
          value: 2,
        },
        {
          label: 'delete',
          value: 3,
        },
        {
          label: 'update',
          value: 4,
        },
      ],
    },
    option: {
      width:100 // 表格项宽度option为例子
    }
  };
  const value = [
    {
      id: 1715156065147,
      key: [1, 2],
      content: 's s',
      operator: 2,
      relation:'or',
      not:true

    },
  ];
   const value1 = [
    {
      id: 1715156065147,
      key: 1,
      content: 's s',
      operator: 2,
      relation:'or',
      not:true

    },
  ];
  const [dataSource, setDataSource] = useState<any>(value);
  return (
    <>
      <Space direction="vertical">
          自适应宽度
        <div className={style.auto}>
          <ConditionSelect value={dataSource} onChange={setDataSource} tableRow={defaultTableRow1} inOperate={false} />
        </div>
        展示操作列中的 异或否 
         <div className={style.auto}>
          <ConditionSelect value={dataSource} onChange={setDataSource} tableRow={defaultTableRow1} inOperate={false} hiddenOrNotOperate={false}/>
        </div>
        缺少operator操作demo(inOperate默认为true) 并且key只能选一次。
        <ConditionSelect value={dataSource} onChange={setDataSource} tableRow={defaultTableRow1} inOperate={false} isUniqueKey />
        缺少operator操作demo(inOperate默认为true)
        <ConditionSelect value={dataSource} onChange={setDataSource} tableRow={defaultTableRow1} inOperate={false} />
        新增一行不需要校验所有项为空demo (isRequire默认为true)
        <ConditionSelect value={dataSource} onChange={setDataSource} tableRow={defaultTableRow} isRequire={false} />
        onChange
        <ConditionSelect
          tableRow={defaultTableRow}
          onChange={(value) => {
            console.log(value);
          }}
        />
        有数据回显
        <ConditionSelect value={value1} tableRow={defaultTableRow2} />
      </Space>
    </>
  );
};
```

<API src="./index.tsx"></API>