README
antd-form-seach
安装包
`npm i antd-form-seach
调用方法
import FormSeach from 'antd-form-seach'
<FormSeach
formData={data}
col={3}
onSeach={(seachData)=>{
this.seachlist(seachData)
}}
onReset={(seachData)=>{
this.seachlist(seachData)
}}
></FormSeach>
参数说明 formData
整体参数格式
type // 类型 必传 String
lable // lable 必传 String
value // 返回参数key 必传 String
defaultValue // 默认值 非必传 String || data || [] || {}
defaultAttribute // 支持antd默认参数 非必传 {}
输入框 参数及示例
{
type:"input",
lable:'输入框',
value:'orderSn',
// defaultValue:'123',
defaultAttribute:{
placeholder:'输入框11',
}
},
日期 参数及示例
defaultValue 传 moment('2019-11-11') 格式
{
type:"datapicker",
lable:'日期',
value:'datapicker',
// defaultValue:moment('2019-11-11'),
defaultAttribute:{
placeholder:'请选择日期',
}
},
月份 参数及示例
defaultValue 传 moment('2019-11-11') 格式
{
type:"monthpicker",
lable:'月份',
value:'monthpicker',
// defaultValue:moment('2019-11-11'),
defaultAttribute:{
placeholder:'请选择月份',
}
},
双日历 参数及示例 两个单独的日历组成的双日历
defaultValue 传 [moment('2019-11-11'),moment('2019-11-15')] 格式
value 需要传两个参数 逗号隔开'towdatapickerStart1,towdatapickerEnd1' 用来接收选中的两个时间
{
type:"towdatapicker",
lable:'双日历',
value:'towdatapickerStart1,towdatapickerEnd1',
// defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
defaultAttribute:{
placeholder:['开始日期','结束日期'],
}
},
双日历 参数及示例 rangepicker
defaultValue 传 [moment('2019-11-11'),moment('2019-11-15')] 格式
value 需要传两个参数 逗号隔开'rangepickerStart1,rangepickerEnd1' 用来接收选中的两个时间
{
type:"rangepicker",
lable:'双日历',
value:'rangepickerStart1,rangepickerEnd1',
// defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
defaultAttribute:{
placeholder:['开始日期','结束日期'],
}
},
普通下拉选择框 参数及示例
data 传 [{value:'',lable:'全部'},{value:'1',lable:'待审核'},{value:'2',lable:'已审核'},{value:'3',lable:'已拒绝'}], 数组
每一项的 key 都为 lable，value
不传data的话可传dataDom
dataDom:companyNameChildren, // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
配和 isAll 使用可在选项中增加全部选项
{
type:"select",
lable:'select',
value:'status',
// defaultValue:'1',
data:[{value:'',lable:'全部'},{value:'1',lable:'待审核'},{value:'2',lable:'已审核'},{value:'3',lable:'已拒绝'}],
// dataDom:companyNameChildren, // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
// isAll:true, // 是否添加全部选项 与dataDom 配和使用 单独使用不生效
defaultAttribute:{
placeholder:'select',
}
},
带搜索的下拉单选 参数及示例
seachSelectRadioData 参数为 [{value:'11',lable:'全部'},{value:'1',lable:'待审核'},{value:'2',lable:'已审核'},{value:'3',lable:'已拒绝'}],数组
onSearch 输入框输入内容回调 需要返回新的 seachSelectRadioData 数组
{
type:"seachSelectRadio",
lable:'下拉单选',
value:'statusradio',
data:seachSelectRadioData,
onSearch:this.onSeachSelectRadio.bind(this),
// defaultValue:'11',
defaultAttribute:{
placeholder:'带搜索的下拉单选',
}
},
带搜索的下拉多选 参数及示例
seachSelectRadioData 参数为 [{value:'11',lable:'全部'},{value:'1',lable:'待审核'},{value:'2',lable:'已审核'},{value:'3',lable:'已拒绝'}],数组
onSearch 输入框输入内容回调 需要返回新的 seachSelectRadioData 数组
defaultValue 默认选中 传 ['11','2'] 数组
maxTagCount 最大显示数量
{
type:"seachSelectCheckbox",
lable:'下拉多选',
value:'statuscheckbox',
data:seachSelectRadioData,
onSearch:this.onSeachSelectRadio.bind(this),
// defaultValue:['11','2'],
defaultAttribute:{
placeholder:'带搜索的下拉多选',
maxTagCount:2,
}
},
级联选择 参数及示例
cascaderData = [
{
value: '1',
label: 'Zhejiang',
children: [
{
value: '11',
label: 'Hangzhou',
children: [
{
value: '111',
label: 'West Lake',
},
],
},
],
},
{
value: '2',
label: 'Jiangsu',
children: [
{
value: '21',
label: 'Nanjing',
children: [
{
value: '22',
label: 'Zhong Hua Men',
},
],
},
],
},
];
seachSelectRadioData antd组件数据类型
defaultValue:['2','21','22'],
{
type:"cascader",
lable:'级联选择',
value:'cascader1',
data:cascaderData,
// defaultValue:['2','21','22'],
defaultAttribute:{
placeholder:'级联选择',
}
},
金额范围 参数及示例
value:'amount1,amount2', 两个参数逗号隔开 用来接收最小最大值
defaultValue:['1','100'],
{
type:"amountRange",
lable:'金额范围',
value:'amount1,amount2',
// defaultValue:['1','100'],
defaultAttribute:{
placeholder:['1','1000'],
}
},
省市区 参数及示例
regions = addressdata.data[0].children; 统一接口返回数据取第1个的children 过滤掉国
defaultValue:{
cityId:52,
cityName:"北京",
districtId:517,
districtName:"延庆区",
provinceId:2,
provinceName:"北京",
},
{
type:"regionSelect",
lable:'省市区',
value:'value',
data:regions,
// defaultValue:{
// cityId:52,
// cityName:"北京",
// districtId:517,
// districtName:"延庆区",
// provinceId:2,
// provinceName:"北京",
// },
defaultAttribute:{
placeholder:'请选择省市区',
}
},
整体参数格式
let data = [{
type:"input",
lable:'输入框',
value:'orderSn',
// defaultValue:'123',
defaultAttribute:{
placeholder:'输入框11',
}
},{
type:"datapicker",
lable:'日期',
value:'datapicker',
// defaultValue:moment('2019-11-11'),
defaultAttribute:{
placeholder:'请选择日期',
}
},{
type:"monthpicker",
lable:'月份',
value:'monthpicker',
// defaultValue:moment('2019-11-11'),
defaultAttribute:{
placeholder:'请选择月份',
}
},{
type:"towdatapicker",
lable:'双日历',
value:'towdatapickerStart1,towdatapickerEnd1',
// defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
defaultAttribute:{
placeholder:['开始日期','结束日期'],
}
},{
type:"rangepicker",
lable:'双日历',
value:'rangepickerStart1,rangepickerEnd1',
// defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
defaultAttribute:{
placeholder:['开始日期','结束日期'],
}
},{
type:"select",
lable:'select',
value:'status',
// defaultValue:'1',
data:[{value:'',lable:'全部'},{value:'1',lable:'待审核'},{value:'2',lable:'已审核'},{value:'3',lable:'已拒绝'}],
// dataDom:companyNameChildren, // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
// isAll:true, // 是否添加全部选项 与dataDom 配和使用 单独使用不生效
defaultAttribute:{
placeholder:'select',
}
},{
type:"seachSelectRadio",
lable:'下拉单选',
value:'statusradio',
data:seachSelectRadioData,
onSearch:this.onSeachSelectRadio.bind(this),
// defaultValue:'11',
defaultAttribute:{
placeholder:'带搜索的下拉单选',
}
},{
type:"seachSelectCheckbox",
lable:'下拉多选',
value:'statuscheckbox',
data:seachSelectRadioData,
onSearch:this.onSeachSelectRadio.bind(this),
// defaultValue:['11','2'],
defaultAttribute:{
placeholder:'带搜索的下拉多选',
maxTagCount:2,
}
},{
type:"cascader",
lable:'级联选择',
value:'cascader1',
data:cascaderData,
// defaultValue:['2','21','22'],
defaultAttribute:{
placeholder:'级联选择',
}
},{
type:"amountRange",
lable:'金额范围',
value:'amount1,amount2',
// defaultValue:['1','100'],
defaultAttribute:{
placeholder:['1','1000'],
}
},
{
type:"regionSelect",
lable:'省市区',
value:'value',
data:regions,
// defaultValue:{
// cityId:52,
// cityName:"北京",
// districtId:517,
// districtName:"延庆区",
// provinceId:2,
// provinceName:"北京",
// },
defaultAttribute:{
placeholder:'请选择省市区',
}
},
];
返回参数示例
{
"orderSn":"123",
"datapicker":1575993599000,
"monthpicker":1575129599999,
"status":"1",
"statusradio":"1",
"statuscheckbox":["2"],
"cascader1":["2","21","22"],
"value":{
"provinceId":3,
"provinceName":"安徽",
"cityId":36,
"cityName":"安庆",
"districtId":400,
"districtName":"宜秀区"
},
"towdatapickerStart1":1575907200000,
"towdatapickerEnd1":1577375999000,
"rangepickerStart1":1575907200000,
"rangepickerEnd1":1576857599000,
"amount1":"1",
"amount2":"2"
}