Vue-----element框架中，可输入下拉框（el-select和el-autocomplete对比）

需求：需要一个即可选择也可输入的输入框,且需要自定义模板（输入视频源url时，其名称也需展示）。
考虑到element有两种组件可实现，那么就来对比一下这两种
实现：
el-select的实现比较简单，参考element的官网：https://element.eleme.io/#/zh-CN/component/select

只需加filterable allow-create即可完成此需求，且有clearable属性，可清除。同时，也可通过以下方式自定义模板。
但是，展示效果并不让人满意。即需要选中下拉框的新增项。

 <el-select v-model="url" filterable allow-create default-first-option clearable placeholder="请选择或输入视频源地址" style="width:780px"> 
    <el-option v-for="item in videoTableData"  :key="item.url"  :label="item.filename"  :value="item.url" >
        <span style="float: left">{{ item.name }}</span>
        <span style="margin-left:15px;color: #8492a6; font-size: 13px">({{ item.url }})</span>
    </el-option>
 </el-select>

于是，我选用了el-autocomplete,参考element的官网：https://element.eleme.io/#/zh-CN/component/input
展示效果良好。
但是该组件无清空按钮，于是我通过以下方式给该组件增加上了清空按钮。

<el-autocomplete
    class="inline-input"
    ref="input"
    v-model="url"
    :fetch-suggestions="querySearch" 
    placeholder="请选择或输入视频源地址" 
    style="width:780px"
    @mouseenter.native="isHover = true"
    @mouseleave.native="isHover = false"
    >
    <i v-if="showsClear" class="el-icon-circle-close el-input__icon" slot="suffix" @click="handleIconClick"></i>
    <i v-else class="el-icon-arrow-down el-input__icon" slot="suffix" @click="handleIconClick"></i>
    <template slot-scope="{ item }">
        <div @click="choose(item)">
            <span style="float: left">{{ item.name }}</span>
            <span style="margin-left:15px;color: #8492a6; font-size: 13px">({{ item.value }})</span>
        </div>
    </template>
</el-autocomplete>
<script>
export default {
    props:{
        clearable: {
            type: Boolean,
            default: true,
        }
    },
    data() {
         return {
             isHover: false,
             url:'',
             videoTableData :[]
         }
    },
     mounted(){
            this.getvideoTableData ();   
      },
    computed: {
         showsClear () {
             return this.clearable && this.url && this.isHover
         },
     },
    methods:{
         handleIconClick () {
         if (this.showsClear) {
             this.url = '';
         } else {
             this.$refs.input.focus();
         }
     },    
     querySearch(queryString, cb) {
         var videoTableData = this.videoTableData;
         var results = queryString ? videoTableData.filter(this.createStateFilter(queryString)) : videoTableData;
         cb(results);
      },
     createStateFilter(queryString) {
       return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >=0);
        };
     },
     //获取列表数据
     getvideoTableData (){
       this.videoTableData = [{
       name:'文件分享.mp4',
       value:'dshgfdshfjdshghfhsd……'  
       },
       ……
       ]
     }
     
     …………       
}
</script>

效果如下