vue-treeSelect校验

vue-treeSelect简介

vue-treeSelect
这是一个树形下拉选择框

image

• 如果在form表单里(el-form)进行校验会出现问题,rules里的tigger没有相关的触发校验事件(我在网站上没有找到，change不能触发)

下面写一下我的解决方法案例

• 先看代码

代码示例

<treeselect v-model='partake.dicPid' :multiple='false' :options='options1' @input='changeDicPid' @close='changeDicPid' v-show='dialogShow'></treeselect>

• rules里正常写

rule写法

• @input和@close的含义

image

顾名思义input是输入之后调用的方法，close是关闭下拉框调用的方法（因为选择框有个输入搜索功能，所以需要调用input方法）

• 在input和close调用的方法里用validateField重新校验，就能在选择或清空数据时进行校验

image

changeDicPid(val){
  this.$nextTick(()=>{
    this.$refs.partakeRef.validateField('dicPid)
}) 
}

• 在保存和关闭的方法里正常调用表单校验和清除校验即可

  需要注意的是，在清除校验时，会调用方法里的校验，此时会提示校验信息，所以可以判断一下保存状态