antd控件用法

来源：互联网发布：淘宝网购男士夹克编辑：程序博客网时间：2024/06/06 17:04

1.TreeSelect

import { TreeSelect } from 'antd';const TreeNode = TreeSelect.TreeNode;class Demo extends React.Component {  state = {    value: undefined,  }  onChange = (value) => {    console.log(arguments);    this.setState({ value });  }  render() {  ##定义下拉树的数据    const bizProductCodeTree=[      {        bizProductCode:'10',        bizProductCodeName:'头寸管理',        children:[          {            bizProductCode:'101010',            bizProductCodeName:'头寸户-头寸户',            children:[              {                bizProductCode:'10101010002000',                bizProductCodeName:'银存户-在途户',                children:[]              },{                bizProductCode:'10101010002001',                bizProductCodeName:'银存户-在途户',                children:[]              }            ]          }         ]      },{      bizProductCode:'30',      bizProductCodeName:'清算管理',      children:[        {          bizProductCode:'301020',          bizProductCodeName:'头寸户-待清算',          children:[            {              bizProductCode:'30102010009000',              bizProductCodeName:'银存户-应清算',              children:[]            }          ]        },{          bizProductCode:'302020',          bizProductCodeName:'待清算-待清算',          children:[            {              bizProductCode:'30202011009000',              bizProductCodeName:'充值待清算-应清算',              children:[]            },{              bizProductCode:'30202012009000',              bizProductCodeName:'提现待清算-应清算',              children:[]            }          ]        }        ]    }];    //产品码树迭代    const loop = (productCodeTree = []) => productCodeTree.map((o) => {      if (o.children.length > 0) {        return <TreeNode key={o.bizProductCode} value={o.bizProductCode} search={o.bizProductCodeName}            title={<span title=''>({o.bizProductCode}){o.bizProductCodeName}</span>}>            {loop(o.children)}</TreeNode>;      } else {        return <TreeNode key={o.bizProductCode} value={o.bizProductCode} search={o.bizProductCodeName}            title={<span title=''>({o.bizProductCode}){o.bizProductCodeName}</span>} />;      }    });    return (      <TreeSelect                    showSearch                    style={{ width: 300 }}                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}                    placeholder="Please select"                    allowClear                    treeDefaultExpandAll                    onChange={this.onChange}                  >                   {loop(bizProductCodeTree ? bizProductCodeTree : [])}                  </TreeSelect>    );  }}ReactDOM.render(<Demo />, mountNode);

2.select分组多选

<Select                  defaultValue="lucy"                  style={{ width: 200 }}                  multiple                >                  <OptGroup label="Manager" key="Manager">                    <Option value="jack">Jack</Option>                    <Option value="lucy">Lucy</Option>                  </OptGroup>                  <OptGroup label="Engineer" key="Engineer">                    <Option value="Yiminghe">yiminghe</Option>                  </OptGroup>                </Select>

阅读全文

0 0