---
title: QuotaSelect - 指标选择
nav:
  title: 基础组件
  path: /components
group:
  path: /
---

# QuotaSelect 指标选择

基础业务组件

- 允许对分类指标进行选择
- 允许限制选择最大指标数
- 允许搜索指标

## 何时使用

- 在指标选择时。

## 代码演示

<code src="./demos/Basic.tsx">

## API

指标选择按钮 props 参考 https://ant.design/components/button-cn/#API

已选指标树 props 参考 https://ant.design/components/tree-cn/#API

| 参数           | 说明                           | 类型               | 默认值         |
| -------------- | ------------------------------ | ------------------ | -------------- |
| buttonProps    | 指标选择按钮                   | object             | { }            |
| width          | 模态框宽度                     | number             | 900            |
| title          | 模态框标题                     | string             | 选择显示字段   |
| cancelText     | 模态框取消按钮文字             | string             | 取消选择       |
| okText         | 模态框确认按钮文字             | string             | 确定           |
| placeholder    | 搜索框占位符                   | string             | 搜索关键词     |
| searchPrefix   | 搜索框前置图标                 | ReactNode          | SearchOutlined |
| maximum        | 最多可选择指标数量             | number             | 0              |
| dataSource     | 指标列表数据源                 | array              | [ ]            |
| selectData     | 已选指标数据                   | array              | [ ]            |
| treeProps      | 已选指标树 props               | object             | { }            |
| onModalCancel  | 点击模态框取消按钮的回调       | function(value){ } | -              |
| onModalOk      | 模态框点击确定回调             | function(value){ } | -              |
| onModalClose   | 模态框点击关闭回调             | function(value){ } | -              |
| onTreeDrop     | 拖动选中树节点的回调           | function(value){ } | -              |
| onCancelSelect | 点击已选指标树的删除按钮的回调 | function(value){ } | -              |
