autocomplete
是一个可带输入建议的输入框组件,fetch-suggestions
是一个返回输入建议的方法属性,如 querySearch(queryString, cb),
在该方法中你可以在你的输入建议数据准备好时通过 cb(data)
返回到 autocomplete
组件中。
使用之前建议参考官方文档
input根据输入内容提供对应的输入建议https://element.eleme.cn/#/zh-CN/component/input
输入建议回调的数据结构
//官网使用列子
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
restaurants: [],
state1: '',
};
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
//
{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>
- 问题:获取到后端返回的数组,并将数组传入作为
results
传入callback
后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框。 - 原因:默认绑定
data:[] 中的 value
字段。 - 解决办法:(看了好多方法,其实这里不需要很麻烦的转换数据结构)官网提供了
属性value-key
,赋值成你需要的字段即可。
//我这里需要的字段名称为companyName
<el-autocomplete
class="inline-input"
v-model="searchForm.searchCompany"
:fetch-suggestions="querySearch"
placeholder="请输入企业关键字"
@select="handleSelect"
value-key="companyName"
@keydown.native.enter="companyPolicyHandel"
></el-autocomplete>
增加回车触发事件
- 问题:
@keydown.enter
事件触发不了 - 原因:element-ui自身封装了一层
input标签
之后,把原来的事件隐藏了,加上.native
可以监听到组件根元素的原生事件 - 解决方法:使用
@keydown.native.enter
规则校验不生效
一开始触发条件使用了blur,改成change就好了,具体原因正在考察中。
searchRule: {
searchCompany: [
{required: true, message: '企业不能为空', trigger: 'change'}
],
},
表单只有一个input,回车事件时需要禁止默认提交表单
- 问题:表单只有一个input,回车默认提交表单。导致第一次回车就会刷新页面,再次回车,才出发回车事件。
- 解决:当一个 form 元素中只有一个输入框时,在该输入框中按下回车会提交该表单。如果希望阻止这一默认行为,可以在标签上添加
@submit.native.prevent。
或者为表单元素增加属性onSubmit="return false"。
其他问题遇到继续补充。