美文网首页
element-ui 创建 可输入,可选择,可搜索下拉框

element-ui 创建 可输入,可选择,可搜索下拉框

作者: 一个健康马 | 来源:发表于2022-12-27 15:46 被阅读0次
效果.gif
<el-select
        style="width:100%"
        v-model="value"
        filterable
        remote
        :loading='lodingy'
        allow-create
        @visible-change="editSelect"
        default-first-option
        :remote-method="remoteMethod"
        placeholder="请选择过滤内容">
        <el-option
          v-for="item in options"
          :key="item"
          :value="item">
        </el-option>
    </el-select>

 data() {
      return {
value:'',
lodingy:false,
options:[]
}
}
editSelect(e){
        if(!e){
          this.remoteMethod()
        }
      },

/ 远程搜索枚举值
      remoteMethod(columnValue=''){
        this.lodingy=true
        listColumnValues({columnName:this.searchName,columnValue}).then(res=>{
         console.log(res)
         this.options=res.data?res.data:[]
         this.lodingy=false
        }).catch(err=>{
           this.options=[]
           this.lodingy=false
          console.log(err)
        })
      },

相关文章

网友评论

      本文标题:element-ui 创建 可输入,可选择,可搜索下拉框

      本文链接:https://www.haomeiwen.com/subject/kwnoqdtx.html