element-ui带输入建议的input框踩坑--输入建议空白

问题：获取到后端返回的数组，并将数组传入作为results 传入 callback后，焦点放在输入框上的时候，并未出现任何内容，只出现了一个不完整的空白框。

原因分析：Elemen t带建议查询输入框，输入建议列表的数据只来源于
data:[] 中的 value 字段！！！

解决方案1：将自己的数据需要展示的字段组成{value:‘建议’}这种格式
this.devEuiArr.push({“value”: item.dev_eui})

searchAppNodeApi(searchQuery).then(response => {this.loadAll = response.datathis.devEuiArr = [];for (let item of this.loadAll) {this.devEuiArr.push({"value": item.dev_eui})}})

后来查阅资料发现有更简单的解决方案：
解决方案二：通过设置el-autocomplete的value-key属性来设置作为输入建议的字段
value-key = ‘nickName’ （我的建议字段是 nickName）

<el-autocompletev-model="form.personName":fetch-suggestions="querySearch"placeholder="请输入负责人名称":trigger-on-focus="false"value-key = 'nickName'@select="handleSelect"style="width: 300px;"></el-autocomplete>

简单一行代码就解决啦

element-ui带输入建议的input框踩坑--输入建议空白相关推荐

input框不允许输入负数
input框不允许输入负数 <input type="text" class="input" onkeyup="clearNoNum(this) ...
tinymce富文本框踩坑
tinymce富文本框踩坑 1.页面中需要多个富文本框时,每个富文本框的id必须做唯一标识,否则无法编辑 2.在tinymce富文本框需要做判断来显示时,谨慎使用v-if和v-show v-if会使富 ...
input框限制只能输入正整数、字母、小数、汉字
input框限制只能输入正整数.字母.小数.汉字有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数代码如下: & ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
Input框设置只能输入中文
场景设置input框只能输入中文. 效果实现 <input name="nation" type="text" id="nation&quo ...
给微电子专业学生的一些建议，如何避免踩坑？
建议往往都是有时效性的,就拿高考报志愿来说,20年前的土木专业的那套说法并不适用于今天,也说不准10年后最好的专业可能真的是"生化材环". 当下来说,微电子专业无疑是志愿选择中较为 ...
Input框设置只能输入英文
场景设置input框只能输入英文. 效果实现 <input type="text" id="chineseLastName" name="c ...
element ui封装 tree下拉框
展示: 子组件封装  <template><el-popoverref="popover"placement=& ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...

element-ui带输入建议的input框踩坑--输入建议空白

element-ui带输入建议的input框踩坑--输入建议空白相关推荐

最新文章

热门文章