ElementUI select下拉框實現可輸入文字的效果

要求

select下拉框既可以實現選擇的功能又可以實現輸入的功能

原理

• 使用allow-create屬性即可通過在輸入框中輸入文字來創建新的條目
• 注意此時filterable必須爲真
• 本例還使用了default-first-option屬性，在該屬性打開的情況下，按下回車就可以選中當前選項列表中的第一個選項，無需使用鼠標或鍵盤方向鍵進行定位

實現

<el-form-item label="通行方式">
            <div>     
              <el-select v-model="form.trafficrouter" slot="prepend"  style="width:150px;" 
              multiple // 此參數可以多選
              filterable 
              allow-create 
              default-first-option //加上這三個參數即可實現效果
              >
                <el-option label="公交" value="2"></el-option>
                <el-option label="地鐵" value="3"></el-option>
                <el-option label="高鐵" value="4"></el-option>
                <el-option label="其他" value="5"></el-option>
              </el-select>
            </div>   
</el-form-item>

效果