功能需求:
- 查到另一张表的“姓名”字段,在输入框下有下拉框
- 可以输入,自动匹配下拉列表中的字段
- 鼠标点击在输入框,下拉列表出现
实现
- 使用Element-UI前端模板 ,< el-autocomplete> 之 “自定义模板” 标签
- 复制到代码中后,在输入框输入 “三” 之后,下拉列表中不能匹配到下拉框中字段
解决
- 过滤方法中,这里是
=== 0
,indexOf()
方法是返回包含的位置,并不是存在===0
,不存在===-1
restaurant.crewName.indexOf(queryString) === 0
所以将这个改成 >=
就可以了
<template>
<div class="app-container">
<el-dialog
:title="title"
top="30px"
:center="false"
>
<el-form ref="mainForm" :rules="rules" :model="mainForm" label-width="100px" class="rcxc-edit-form">
<el-row>
<el-col :span="12">
<el-form-item label="想定名称" prop="sceName">
<el-input v-model="mainForm.sceName" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编写人员" prop="sceUser">
<el-autocomplete
v-model="mainForm.sceUser"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
>
<i
slot="suffix"
class="el-icon-edit el-input__icon"
@click="handleIconClick"
/>
<template slot-scope="{ item }" :data="mainForm">
<div class="name" @click="checkName(item.crewName)">{{ item.crewName }}</div>
</template>
</el-autocomplete>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'TrainingScenarioEdit',
data() {
return {
restaurants: [
{
crewName: '',
crewType: ''
}
],
mainForm: {
id: '',
sceName: '',
sceUser: '', // 编写人员
},
}
},
methods: {
loadAll() {
list(this.crewInfo).then(res => {
console.log('res', res)
this.restaurants = res.rows
})
},
// 点击图标,删除输入框的内容
handleIconClick(ev) {
console.log('ev', ev)
this.mainForm.sceUser=''
},
checkName(crewName) {
this.mainForm.sceUser = crewName
},
// 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它
querySearch(queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
// 点击选项时找到id并赋值
handleSelect(result) {
console.log('result', result)
this.mainForm.sceUser = result.crewName
},
// 过滤作用
createFilter(queryString) {
return (restaurant) => {
console.log('indexOf' + restaurant.crewName.indexOf(queryString))
return (restaurant.crewName.indexOf(queryString) >= 0)
}
}
}
}
</script>