在element框架中的el-select标签的子标签el-option中需要绑定两个属性,分别是labelvalue,通常我们对接接口和页面展示的内容是不同的,label是用于显示于页面中的内容,例如我们要实现一个下拉框,是否已婚:然后下拉框分别对应的值为是和否,选中是就传参数flag=1,否就flag=0,因此我们的在绑定el-option的属性时就应当,绑定label为是否,value为1和0即可实现。

  • 需求:实现下拉框用户选择,只显示用户的名字,可根据电话或者姓名筛选
    在el-select中绑定属性filterable即可进行搜索,但是这个搜索只是针对绑定的所有label值进行筛选的,需求又是需要进行姓名和电话进行筛选,在这里我们就要用到我们的自定义筛选方法了,首先在el-select中绑定属性**filter-method=“dataFilter”**这里的dataFilter是我们的方法名,在此方法中对所有的数据进行筛选操作,代码如下
	dataFilter(val) {
      console.log(val)
      this.optionDefault = val
      if (val) {
        this.finSelectData = this.selectData.filter(item => {
          if (item.value.indexOf(val) != -1) {
            return true
          }
        })
        console.log(this.finSelectData)
      } else {
        this.finSelectData = this.selectData
      }
    },

代码中的finSelectData是我们绑定在el-select中的数据,selectData是我们所要进行操作的数据,val是我们下拉框输入之后会生成的值,通过val来筛选,finSelectData是selectData的一个副本,它是一个数组,每一项是一个对象,对象中包含label和value两个属性分别对应的是el-option中的label和value两个值,value属性中包含返回的姓名和电话的字符串,通过它来筛选出label的值,最终显示在下拉框中。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐