标签:onclick val item 名称 NPU box ons cal htm
布局:
<div className={Styles.filterbox}>
<div className={Styles.itme}>
<span className={Styles.control} style={{ width:‘210px‘}}>
<Input placeholder="请输入物品名称/品牌" />
</span>
</div>
<div className={Styles.itme}>
<span className={Styles.control} style={{ width:‘150px‘}}>
<Input placeholder="批号" />
</span>
</div>
<div className={Styles.itme}>
<span className={Styles.control}>
<span className={Styles.label}>有效期至:</span>
<DatePicker
dateRender={current => {
const style = {};
if (current.date() === 1) {
style.border = ‘1px solid #1890ff‘;
style.borderRadius = ‘50%‘;
}
return (
<div className="ant-calendar-date" style={style}>
{current.date()}
</div>
);
}}
/>
</span>
</div>
<div className={Styles.itme}>
<span className={Styles.control}>
<span className={Styles.label} onClick={()=>{this.onClick()}} >选择仓库:</span>
<Select style={{width:"180px"}} value={0} >
{
housesbody.map((item,key)=> {
return (
<Option value={0} key={key}>{item.name}</Option>
)
})
}
</Select>
</span>
</div>
<div className={Styles.itme} style={{ paddingTop:‘7px‘}}>
<span className={Styles.control}>
<Checkbox>显示0库存物品</Checkbox>
</span>
</div>
</div>
样式:
.filterbox{ margin-bottom: 20px; width:1240px; display:flex; margin-top:35px; margin-bottom: 30px; box-sizing: border-box; flex-flow: row nowrap; position: relative; .itme{ margin-right: 20PX; .control{ display: flex; flex-direction: row; } .label{ margin-right: 5px; color: #6c757d; font-size: 12px; line-height: 32px; } } }
标签:onclick val item 名称 NPU box ons cal htm
原文地址:https://www.cnblogs.com/zmz-com/p/11670798.html