标签：ant title height react item Select antd options select

见贤思齐焉，见不贤内自省

建立.js组件，在父组件中引入，传入自定义属性

import React from 'react';
import { Select } from 'antd';
import 'antd/dist/antd.css';
import '../styles/select.less';

const {Option} = Select;

class MSelect extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {}
    }
    //父级传入字段默认值
    static defaultProps = {
        title:"",
        options:[],
    }
    render() {
    //keyField  唯一key
    //valueField 指定当前选中的条目
    //titleField 当前项对应的label
    //options  options数组
        let { title,keyField,valueField,titleField,options, ...rest } = this.props;
        return (
            <div className="select">
                {title&&<p className="select-title">{title}</p>}
                {options.length>0&&<Select {...rest}>
                    {options.map((item)=>{
                        return <Option key={keyField?item[keyField]:(item?.title||item)} value={valueField?item[valueField]:(item?.title||item)}>{titleField?item[titleField]:(item?.title||item)}</Option>
                    })}
                </Select>}
            </div>
        )
    }
}

export default MSelect;

less:

// 普通字体
@font-face {
    font-family: myFontFamily;
    src: url('../static/msyh.ttc');
}

//加粗字体
@font-face {
    font-family: myFontFamily-Medium;
    src: url('../static/msyhbd.ttc');
}

//细长字体
@font-face {
    font-family: myFontFamily-Highlight;
    src: url('../static/msyhl.ttc');
}

.search .select .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    width: 200px;
}

.select{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{
        height: 28px;
        line-height: 28px;
    }
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
        width: 200px;
        height: 28px;
    }
    //options配置中的多选 可输入 select option 的css
    .ant-select-show-search .ant-select-selector{
        width: 200px;
        min-height: 28px;
        // height: 28px;
        border-radius: 6px;
    }
    .ant-select-show-search .ant-select-selector .ant-select-selection-item{
        height: 20px;
        line-height: 20px;
        border-radius: 6px;
    }
    &-title{
        padding: 0;
        margin: 0;
        min-width: 105px;
        text-align: right;
    }
    &-title-input{
        padding: 0;
        margin: 0;
        min-width: 90px;
        text-align: right;
    }
}

使用：

在组件中引入，让后使用

 <MSelect
      title={`${item.title}：`}
      showArrow={true}
      value={this.state[`${item.keyName}`]}
      onChange={(e) => { this.inputName(`${item.keyName}`, e) }}
      options={item.keyAndValueList}
      keyField="key"
      valueField="key"
      titleField="value"
      dropdownMatchSelectWidth={true} //官方自带属性 
></MSelect>

数据格式：

keyAndValueList ：[
	{ value: "xx管理", key: 0 }, 
	{ value: "xxx管理", key: 1 }, 
	{ value: "xxx管理", key: 2 }
]

属性都是通过 …rest 解构赋值的形式来给到MSelect组件的

<Select {...rest}></Select>

标签：ant,title,height,react,item,Select,antd,options,select
来源： https://blog.csdn.net/qq_43291759/article/details/121007071

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。