Antd

条件查询列表。两个<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>
    );
  }