1、具体实现功能:本次使用的是autocomplete(自动完成)标签,用来做在输入框中输入数据后会出现提示列表。

图1

2、标签中的属性

(1)v-model:"school":当用户选择提示框中的某一项(item)时,该项(item)中的value值会给属性school赋值(this.school=item.value)。

(2):fetch-suggestions="querySchool"如下图所示,在调用querySchool(queryString,callback)方法时,其中参数:“querySchool”是用户在输入框中输入的数据,“callback(schoolList)”是通过用户输入的数据到后端发起请求(模糊查询)将查询到的数据封装到schoolList[]中,代用callback方法就可以将查询到的数据显示“提示框中”如图 3所示。其中需要回调的数据需要含有value属性,提示框中显示的数据就是value所对应的值。

        注意:在往数组schoolList[]中存贮数据前,先清空数组。

图2
图 3

        (3):trigger-on-focus="true",在用户输入数据后,显示提示的内容,为false时会隐藏提示的内容。

        (4)@select=“handleSchool”当用户点击提示框中的某一项时,会触发@select事件,例如:当点击“烟台大学”时,会触发@select事件,在handleSchool(item)方法中会获取当前项(item是一个对象形式数据)的数据。

图4

 

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐