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>
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16