vue里的select标签的使用

1.拿出select的标签元素

<el-select
    size="small"
    class="collapse-tags-select mini selectBox"
    style="min-width: 140px"
    clearable
    @change="timeChange"
    v-model="timeTypeVal"
    placeholder="请选择"
    collapse-tags
    filterable
  >
    <el-option
      size="small"
      :label="item.value"
      :key="item.label"
      :value="item"
      v-for="item in timeTypeList"
    ></el-option>
  </el-select>

2.定义对应的数据，如下所示：
  

  timeTypeVal: '',
    timeTypeList: [
        {
          value: "昨天",
          label: "0",
        },
        {
          value: "今天",
          label: "1",
        },
        {
          value: "明天",
          label: "2",
        }
      ],

3.定义事件，如下：
  

  /**
     * 时间类型选择事件
     */
    timeChange(obj) {
      this.timeTypeVal = obj.value;
    },

再来看一看远程搜索的示例：

<el-autocomplete
              clearable
              v-model="queryVal"
              :fetch-suggestions="getLampInfo"
              placeholder="请输入"
              @select="handleSelect"
              :trigger-on-focus="false"
              style="width: 220px"
              @keyup.delete.native="deleteLampData"
              @input="inputChange"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
              </template>
            </el-autocomplete>

         

//其中关于fetch-suggestions官网的解释是这样的：返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它。

getLampInfo(queryString, callback) {
    //queryString 输入的关键字
    //callback回调函数
    //在该方法里可以调用接口进行模糊搜索展示
    //代码省略部分
     this.$axios.get(url,{
        params:{
          keyword:queryString
        }
      }).then(res=>{
        
      });
},

//@select事件就是针对查出结果的select事件
handleSelect(item) {
//其中item就是选中的对象
},

//监听键盘事件
deleteLampData(){

},

//输入框值改变事件
inputChange(val){

},

最重要的一点就是显示的值用:label来复制， :value和:key都用来存放唯一值id即可