Vue |
您所在的位置：网站首页 › 下拉框带输入 › Vue |
Vue
|
需求：需要一个即可选择也可输入的输入框,且需要自定义模板（输入视频源url时，其名称也需展示）。 考虑到element有两种组件可实现，那么就来对比一下这两种 实现： el-select的实现比较简单，参考element的官网：https://element.eleme.io/#/zh-CN/component/select 只需加filterable allow-create即可完成此需求，且有clearable属性，可清除。同时，也可通过以下方式自定义模板。 但是，展示效果并不让人满意。即需要选中下拉框的新增项。 {{ item.name }} ({{ item.url }})于是，我选用了el-autocomplete,参考element的官网：https://element.eleme.io/#/zh-CN/component/input 展示效果良好。 但是该组件无清空按钮，于是我通过以下方式给该组件增加上了清空按钮。 {{ item.name }} ({{ item.value }}) 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……' }, …… ] } ………… }效果如下 |
【本文地址】
今日新闻 |
推荐新闻 |