element-ui+vue-treeselect下拉框的校驗(yàn)過程
element-ui+vue-treeselect下拉框的校驗(yàn)(ivew也適用)
在項(xiàng)目開發(fā)中 使用了vue-treeselect的話,使用element-ui或者ivew自帶的表單校驗(yàn)發(fā)現(xiàn),trigger中blur和change均不生效,在選擇了值之后驗(yàn)證依然存在
解決方法主要是使用vue-treeselect官網(wǎng)中api給出的事件中的input,在value改變后觸發(fā),將trigger設(shè)為blur
以下代碼示例為ivew UI
<FormItem label="選擇父級(jí)分類:" prop="classify">
<treeselect
style="width:250px"
v-model="formItem.classify"
:normalizer="normalizer"
:options="options"
@input="changeValue"
noOptionsText="暫無數(shù)據(jù)"
placeholder="請(qǐng)選擇分類"
/>
</FormItem>
<script>
data(){
return{
// 表單驗(yàn)證規(guī)則
ruleValidate: {
classify: [
{
required: true,
type: "string",
message: "請(qǐng)選擇分類",
trigger: "input" /*看這里*/
}
]
}
}
}
// 方法
methods:{
changeValue() {
this.$refs["Form"].validateField("classify");
},
}
</script>
vue-treeselect的插件使用
vue-treeselect地址:https://www.vue-treeselect.cn/
使用@select監(jiān)聽樹形下拉選中事件:

<template slot-scope="scope">
<treeselect
v-model="scope.row.departId"
@select="departTreeSelected"
:disable-branch-nodes="false"
:show-count="false"
:multiple="false"
:options="departs"
placeholder="請(qǐng)選擇"/>
</treeselect>
</template>在methods里定義函數(shù)接收參數(shù)node和instanceId

methods: {
//選中樹形部門選項(xiàng)
departTreeSelected(node,instanceId){
let url = '/datas/staff/busiselect?departCode=' + node.code;
let _this = this;
this.$http.get(url).then(res => {
if(res.data.code==0){
var datas = res.data.data;
for(let item in datas) {
//出差申請(qǐng)人數(shù)組
_this.staffArr.push({
value: item,
label: datas[item].match(/(\S*)-/)[1] //截取'-'前面內(nèi)容作為人員姓名
})
//職級(jí)數(shù)組
_this.rankArr.push({
value: item,
rank: datas[item].match(/-(\S*)/)[1] //截取'-'后面內(nèi)容作為職級(jí)id
})
}
}
})
.catch(err => {
return err;
});
},
}以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 如何解決element-ui中select下拉框popper超出彈框問題
- element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式
- 去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn)
- 基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案
- 關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決
- 解決element-ui的下拉框有值卻無法選中的情況
- Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
- 在element-ui的select下拉框加上滾動(dòng)加載
- 使用Vant完成DatetimePicker 日期的選擇器操作
- 如何修改element-ui日期下拉框datetimePicker的背景色樣式
相關(guān)文章
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具,它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下2018-09-09
使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程
Vue和ElementUI都是非常流行的前端開發(fā)框架,它們可以讓我們更加便捷地開發(fā)前端應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫數(shù)據(jù)
這篇文章主要介紹了基于Vue實(shí)現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢,下面文章我們主要實(shí)現(xiàn)的是輸入框中輸入數(shù)據(jù),根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫對(duì)應(yīng)內(nèi)容,實(shí)現(xiàn)模糊查詢,感興趣的小伙伴可以進(jìn)入文章我們一起學(xué)習(xí)2021-12-12
vue路由警告:Duplicate named routes definition問題
這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實(shí)現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進(jìn)行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進(jìn)行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
用vue實(shí)現(xiàn)注冊(cè)頁效果?vue實(shí)現(xiàn)短信驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了用vue實(shí)現(xiàn)注冊(cè)頁,短信驗(yàn)證碼登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關(guān)于web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue3?路由配置與導(dǎo)航實(shí)戰(zhàn)教程
Vue?Router?提供了強(qiáng)大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實(shí)戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03

