Antd
2019-04-24 本文已影响0人
章鱼要回家
条件查询列表。两个<Select>下拉框，根据后台返回的列表数据，动态加载下拉框的内容。
renderSimpleForm() {
const {
form: { getFieldDecorator },
presentalert,
} = this.props;
// 动态加载<Select>
const arr = presentalert.data;
// 遍历数组 提取名称
const arreEquip = arr.map((item) => {
return item.node_name
})
const arrAlert = arr.map((item) => {
return item.level_name
})
// 数组去重
function unique(array) {
const tmp = [];
for(let i = 0; i < array.length; i+=1){
// 如果当前数组的第i已经保存进了临时数组，那么跳过，
// 否则把当前项push到临时数组里面
if (tmp.indexOf(array[i]) == -1) {
tmp.push(array[i]);
}
};
return tmp;
};
const arrEquipUnique = unique(arreEquip);
const arrAlertUnique = unique(arrAlert);
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="XXX">
{getFieldDecorator('node_name')(
<Select placeholder="请选择" style={{ width: '100%' }}>
{arrEquipUnique.map((item) => {
return <Option value={item}>{item}</Option>
})}
</Select>
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="XXXX">
{getFieldDecorator('level_name')(
<Select placeholder="请选择" style={{ width: '100%' }}>
{arrAlertUnique.map((item) => {
return <Option value={item}>{item}</Option>
})}
</Select>
)}
</FormItem>
</Col>
<Col md={6} sm={24}>
<span className={styles.submitButtons}>
<Button icon='search' type="primary" htmlType="submit">
查 询
</Button>
<Button icon='redo' style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重 置
</Button>
<Button icon='export' type='primary' style={{ marginLeft: 8 }}>
导 出
</Button>
</span>
</Col>
</Row>
</Form>
);
}
