el-select自定义数据

2019-02-05

闲暇时间记录一下项目中用到的框架以及遇到的问题

el-select自定义数据

<el-select    @change="handleSelect" filterable  :filter-method="dataFilter" style="width: 220px;margin-left:5px" size="medium" v-model="addForm.signType" placeholder="请选择事件名称">
    <el-option
            v-for="item in eventTypeLsit"
            :label="item.label"
            :value="item">
    </el-option>
</el-select>

前端数据过滤不过不需要加filterable即可实现前端数据过滤功能 :filter-method是实现后端接口请求模糊搜索

 dataFilter(val){
if (val) { //val存在
      this.eventTypeLsit = this.eventTypeLsitCopy.filter((item) => {
         if (!!~item.signName.indexOf(val) || !!~item.signName.toUpperCase().indexOf(val.toUpperCase())) {
              return true
              }   
            })
          } else { //val为空时，还原数组
              this.eventTypeLsit = this.eventTypeLsitCopy;
         }
},

自定义数据 data就是下拉列表的全部数据 el-select的 :value=”item”即可操作的value就是当前的所有data

getEventList(){
    getRegionList({dictType:this.addForm.name}).then(res => {
       res.data.forEach(item => {
           this.eventTypeLsit.push({label: item.signName, value: item.signType, data:item})
       });
    })
},
handleSelect(val){
    //val =  data
}