• antd-vue的select组件实现既可以输入添加,又可以下拉选择


    最近,项目中碰到需求,要求任务类型可以从下拉框(后台返回的数据)中选择,也可以手动输入添加新项,项目用的是antd-vue,所以最接近的组件就是a-select组件了,废话不多说,改造方法如下:

    HTML:

     1 <a-select
     2             show-search
     3             :value="value"
     4             optionLabelProp='children'
     5             :autoClearSearchValue="false"
     6             placeholder="请选择或输入任务类型"
     7             :default-active-first-option="false"
     8             :show-arrow="false"
     9             :filter-option="true"
    10             :not-found-content="null"
    11             @search="handleSearch"
    12             @blur="handleBlur"
    13             @change="handleChange"
    14           >
    15             <a-select-option v-for="(item,index) in typeData" :key="index">
    16               {{ item.work_type }}
    17             </a-select-option>
    18           </a-select>
    View Code

    data定义:

    1 data () {
    2       return {
    3         value:undefined,
    4         typeData:[],//任务类型数组
    5       }
    6 }
    View Code

    methods方法:

     1  /**
     2        * @function 任务类型文本框的值变化时的回调
     3        * @author ***
     4        * @time 2020-08-17
     5        **/
     6       handleSearch (value) {
     7         this.handleChange(value);
     8       },
     9       /**
    10        * @function 任务类型改变时的回调
    11        * @author ***
    12        * @time 2020-08-17
    13        **/
    14       handleChange (value) {
    15         this.value = (!isNaN(value)&&value!='')?this.typeData[value].work_type:value;
    16       },
    17       /**
    18        * @function 任务类型失焦事件
    19        * @author ***
    20        * @time 2020-08-17
    21        **/
    22       handleBlur(value) {
    23         this.value=value;
    24         this.model.workType = this.value;
    25       },
    View Code

    后台接口返回的数据如下:

    效果图如下:

    PS:模糊查询功能请自行完善

  • 相关阅读:
    iOS 中UI控件的各种对齐方式总结
    BLE 广播数据解析
    Objective-C中一种消息处理方法performSelector: withObject:
    ios的@property属性和@synthesize属性
    iOS中的字符串扫描类NSScanner
    iOS开发技巧(系列十八:扩展UIColor,支持十六进制颜色设置)
    NSMakeRange基础函数应用
    Objective-C中的占位符,打印BOOL类型数据
    NSUInteger和NSInteger和int
    HDU4870:Rating(DP)
  • 原文地址:https://www.cnblogs.com/trampeagle/p/13517357.html
Copyright © 2020-2023  润新知