有一個(gè)項(xiàng)目口柳，輸入時(shí)候提示可用項(xiàng)，但是必須用戶選擇下面的可用項(xiàng)有滑；可能有人會(huì)說為啥不用下拉框跃闹，嗯，項(xiàng)目太多了，下拉框承載不了望艺，而且操作不夠快捷苛秕。
然而，在autocomplete里設(shè)必填（required）的話找默，只要文本框有值就通過了艇劫，不能驗(yàn)證到是否用戶點(diǎn)選的。后用了個(gè)很簡單（自定義驗(yàn)證）的方法實(shí)現(xiàn)了惩激。廢話不多說店煞，上代碼
模板：沒什么特別
<el-autocomplete
v-model="username"
name="username"
class="inline-input"
placeholder="請(qǐng)輸入賬號(hào)"
:highlight-first-item="true"
:trigger-on-focus="false"
:fetch-suggestions="getUser"
@select="handleSelectUser"
/>
js
export default {
data() {
const validateUsername = (rule, value, callback) => {
if (this.authz.id === 0) {
callback(new Error('請(qǐng)選擇賬號(hào)！'))
} else {
callback()
}
}
return {
authzRules: {
username: [
{ trigger: 'blur,change', message: '請(qǐng)選擇賬號(hào)风钻！', validator: validateUsername },
{ trigger: 'blur,change', message: '請(qǐng)選擇賬號(hào)顷蟀！', required: true }
]
},
authz: { // authz role form
id: 0,
username: undefined,
roleIds: []
}
}
}
其中
規(guī)則1，就是判斷下沒id時(shí)候（點(diǎn)選時(shí)候通過handleSelectUser設(shè)置authz的id)就是沒選賬號(hào)
規(guī)則2骡技，只是為了保持頁面樣色一致（required會(huì)生成個(gè)必填的*號(hào)）
