element UI的带输入建议el

您所在的位置：网站首页 › 请输入下拉列表中的一个值什么意思 › element UI的带输入建议el

element UI的带输入建议el

2024-07-05 01:24| 来源: 网络整理| 查看: 265

Table of Contents

引用el-autocomplete

触发带输入建议的两种方式

转成输入建议回调的数据结构

增加回车触发事件

解决回车后建议输入框没消失的bug

vue+element UI

element UI的带输入建议官方文档：https://element.eleme.cn/#/zh-CN/component/input

建议先看官方文档，这里是官方文档的适当补充

引用el-autocomplete

1、在需要的地方引用

v-model="inputValue" ：与inputValue绑定值，也就是说，自动输入建议的值可以通过inputValue拿到。

:fetch-suggestions="querySearch" ：返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据。

@select="handleSelect" ：当选中建议项时，调用该方法。

2 、

export default { name: "searchBar", //allInfos是父组件传来的值，如果allInfos不是父组件传来的就不用这样写 props: ["allInfos"], data() { return { inputValue: "", }; }, methods: { handleSubmit() { //根据自身情况 //该方法是提交时触发 }, //输入框获取焦点时调用的方法 querySearch(queryString, cb) { //allInfos是怎么来，是从父组件传过来的还是在自己组件调用api接口拿到的还是其他 //我这里的allInfos是从父组件传过来的，在这里也举例子组件从父组件传值 let results = this.allInfos; results = queryString ? results.filter(this.createFilter(queryString)) : results; //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表 cb(results); }, //该方法仿写官方文档，如果没有特别的需求，该方法改动不大 //这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。 //我这里用的是调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配，看自身情况选择 createFilter(queryString) { return (item) => { return item.value.toUpperCase().match(queryString.toUpperCase()); }; }, }, }; 触发带输入建议的两种方式 1.输入框获取焦点时就触发

这是默认的

2.输入值后匹配触发

在组件上加上:trigger-on-focus="false"

转成输入建议回调的数据结构

大家也看到了文档里面，回调的数据结果，是一个数组，数组的每一项是一个对象，对象里一定要有一个value的属性，这些是必须的。如果数据结构不长这样，那么待输入建议的数据是无法渲染出来的。

[ { "value": "xxx(在输入建议看到的值，必需)", "address": "看自身情况" }, ]

那么问题来了，如果拿出来的数据不是这样结构，该怎么办？以我的情况举个例子。

我拿到的数据是这样的，虽然也是数组，但是数组里的对象属性不一样。

this.modelInfos= [ { "modelId": "1", "modelName": "a1"，type:"c" }, { "modelId": "2", "modelName": "a2"，type:"c" }, { "modelId": "3", "modelName": "a3"，type:"c" }, { "modelId": "4", "modelName": "a4"，type:"c" }, ]

用map返回想要的数据结构。

this.allInfos= this.modelInfos.map((terminal) => { return { value: modelName, name: modelId, }; });

可以log打印一下，就会发现allInfos的结构就变成了想要的亚子。

增加回车触发事件

在组件里增加 @keyup.enter.native方法

解决回车后建议输入框没消失的bug

如果增加了回车事件，那么输入数据回车后，输入建议框没有自动消失，该如何解决？

在组件又增加方法：@input（在输入值发生改变的时候触发changeStyle方法）

@keyup（按键松开触发的事件，也就是回车时触发changeStyle方法）

传入的“block”是让输入框建议展开，'.el-autocomplete-suggestion'是输入建议框的类名

//根据传进来的状态改变建议输入框的状态（展开|隐藏） changeStyle(status, className) { let dom = document.querySelectorAll(className); dom[0].style.display = status; },

在handleSubmit的时候调用changeStyle方法，传入的状态为none（表示让输入建议框隐藏）

handleSubmit() { this.changeStyle("none", ".el-autocomplete-suggestion"); },

【本文地址】

element UI的带输入建议el

element UI的带输入建议el

今日新闻

推荐新闻