element-ui+vue-treeselect下拉框的校驗過程

更新時間：2022年07月26日 09:56:23 作者：喵大叔、

這篇文章主要介紹了element-ui+vue-treeselect下拉框的校驗過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui+vue-treeselect下拉框的校驗(ivew也適用)

在項目開發(fā)中使用了vue-treeselect的話，使用element-ui或者ivew自帶的表單校驗發(fā)現(xiàn)，trigger中blur和change均不生效，在選擇了值之后驗證依然存在

解決方法主要是使用vue-treeselect官網(wǎng)中api給出的事件中的input，在value改變后觸發(fā)，將trigger設(shè)為blur

以下代碼示例為ivew UI

		 <FormItem label="選擇父級分類：" prop="classify">
	          <treeselect
	            style="width:250px"
	            v-model="formItem.classify"
	            :normalizer="normalizer"
	            :options="options"
	            @input="changeValue"
	            noOptionsText="暫無數(shù)據(jù)"
	            placeholder="請選擇分類"
	          />
        </FormItem>
		<script>
		data(){
			return{
				// 表單驗證規(guī)則
				 ruleValidate: {
				        classify: [
				          {
				            required: true,
				            type: "string",
				            message: "請選擇分類",
				            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="請選擇"/>
  </treeselect>
 </template>

在methods里定義函數(shù)接收參數(shù)node和instanceId

methods: {
	 //選中樹形部門選項
    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) {
            //出差申請人數(shù)組
            _this.staffArr.push({
             value: item,
             label: datas[item].match(/(\S*)-/)[1] //截取'-'前面內(nèi)容作為人員姓名
            })
            //職級數(shù)組
            _this.rankArr.push({
              value: item,
              rank: datas[item].match(/-(\S*)/)[1] //截取'-'后面內(nèi)容作為職級id
            })
          }
        }
      })
      .catch(err => {
        return err;
      });
    },
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: