投稿
  1. Web176教程首页
  2. Element-React 教程

Element-React Select 选择器

admin • • Element-React 教程 • 阅读 173

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选

value的值为当前被选中的Option的 value 属性值
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: 
  };
}
render() {
  return (
      <Select value={this.state.value} placeholder="请选择">
        {
          this.state.options.map(el => {
            return <Select.Option key={el.value} label={el.label} value={el.value} />
          })
        }
      </Select>
  )
}

有禁用选项

在Option中，设定disabled值为 true，即可禁用该选项

Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶,
      disabled: true
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: 
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} disabled={el.disabled} />
        })
      }
    </Select>
  )
}

禁用状态

选择器不可用状态

为Select设置disabled属性，则整个选择器不可用
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: 
  };
}


render() {
  return (
    <Select value={this.state.value} disabled={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

可清空单选

包含清空按钮，可将选择器清空为初始状态

为Select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: 
  };
}


render() {
  return (
    <Select value={this.state.value} clearable={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

基础多选

适用性较广的基础多选，用 Tag 展示已选项

为Select设置multiple属性即可启用多选，此时value的值为当前选中值所组成的数组
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value} multiple={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

自定义模板

可以自定义备选项

将自定义的 HTML 模板插入Option中即可。

Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    cities: [{
      value: Beijing,
      label: 北京
    }, {
      value: Shanghai,
      label: 上海
    }, {
      value: Nanjing,
      label: 南京
    }, {
      value: Chengdu,
      label: 成都
    }, {
      value: Shenzhen,
      label: 深圳
    }, {
      value: Guangzhou,
      label: 广州
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.cities.map(el => {
          return (
            <Select.Option key={el.value} label={el.label} value={el.value}>
              <span style={{float: left}}>{el.label}</span>
              <span style={{float: right, color: #8492a6, fontSize: 13}}>{el.value}</span>
            </Select.Option>
          )
        })
      }
    </Select>
  )
}

分组

备选项进行分组展示

使用OptionGroup对备选项进行分组，它的label属性为分组名
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      label: 热门城市,
      options: [{
        value: Shanghai,
        label: 上海
      }, {
        value: Beijing,
        label: 北京
      }]
    }, {
      label: 城市名,
      options: [{
        value: Chengdu,
        label: 成都
      }, {
        value: Shenzhen,
        label: 深圳
      }, {
        value: Guangzhou,
        label: 广州
      }, {
        value: Dalian,
        label: 大连
      }]
    }],
    value: 
  };
}


render() {
  return (
    <Select value={this.state.value}>
      {
        this.state.options.map(group => {
          return (
            <Select.OptionGroup key={group.label} label={group.label}>
              {
                group.options.map(el => {
                  return (
                    <Select.Option key={el.value} label={el.label} value={el.value}>
                      <span style={{float: left}}>{el.label}</span>
                      <span style={{float: right, color: #8492a6, fontSize: 13}}>{el.value}</span>
                    </Select.Option>
                  )
                })
              }
            </Select.OptionGroup>
          )
        })
      }
    </Select>
  )
}

可搜索

可以利用搜索功能快速查找选项

为Select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filterMethod来实现。filterMethod为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [{
      value: 选项1,
      label: 黄金糕
    }, {
      value: 选项2,
      label: 双皮奶
    }, {
      value: 选项3,
      label: 蚵仔煎
    }, {
      value: 选项4,
      label: 龙须面
    }, {
      value: 选项5,
      label: 北京烤鸭
    }],
    value: []
  };
}


render() {
  return (
    <Select value={this.state.value} filterable={true}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

远程搜索

从服务器搜索数据，输入关键字进行查找

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remoteMethod。remoteMethod为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
Element-React Select 选择器

constructor(props) {
  super(props);


  this.state = {
    options: [],
    states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware",   "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
    "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
  }
}


onSearch(query) {
  if (query !== ) {
    this.setState({
      loading: true
    });


    setTimeout(() => {
      this.setState({
        loading: false,
        options: this.state.states.map(item => {
          return { value: item, label: item };
        }).filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        })
      });
    }, 200);
  } else {
    this.setState({
      options: []
    });
  }
}


render() {
  return (
    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

Select Attributes

参数说明类型可选值默认值
multiple是否多选boolean—false
disabled是否禁用boolean—false
clearable单选时是否可以清空选项boolean—false
nameselect input 的 name 属性string——
placeholder占位符string—请选择
filterable是否可搜索boolean—false
filterMethod自定义过滤方法function——
remote是否为远程搜索boolean—false
remoteMethod远程搜索方法function——
loading是否正在从远程获取数据boolean—false

Select Events

事件名称说明回调参数
onChange选中值发生变化时触发目前的选中值
onVisibleChange下拉框出现/隐藏时触发出现则为 true，隐藏则为 false
onRemoveTag多选模式下移除tag时触发移除的tag值
onClear可清空的单选模式下用户点击清空按钮时触发–

Option Group Attributes

参数说明类型可选值默认值
label分组的组名string——
disabled是否将该分组下所有选项置为禁用boolean—false

Option Attributes

参数说明类型可选值默认值
value选项的值string/number/object——
label选项的标签，若不设置则默认与 value 相同string/number——
disabled是否禁用该选项boolean—false

作者：admin，如若转载，请注明出处：https://www.web176.com/elementreact/20001.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
adminadmin
0 0
上一篇 2023年5月11日
下一篇 2023年5月11日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注