vue-treeselect使用过程中的问题
vue-treeselect使用过程中的小问题
问题1: 无法使用elementui自带的表单验证规则验证
一般的解决方法:
<el-form-item label="部门" prop="dept">
<treeselect v-model="form.dept" :options="options" @input="handleInput" @open="handleOpen" :show-count="true" :disabled="selectDosabled" placeholder="请输入部门"
style="width: 320px" v-if="deptOption" />
</el-form-item>
一般在el-form里面的写法如上
由于 prop 无效, 需要使用 @input方法, 在选择值的时候手动触发 表单验证
data() {
return {
rules: {
dept: [
{required: true, message: '请选择部门', trigger: 'input'}
]
}
}
},
methods: {
handleInput() {
this.$refs.form.validateField('dept')
}
}
问题2:点击其他el-select, 在点击treeselect的时候, 之前的select的下拉框无法收回
问题应该是 treeselect 的点击事件 并没有触发 el-select的onblur事件,
在网上收了一下, 好像没有人有这个问题, ??? 难道只有我遇到了,
解决方法: 在点击 treeselect的时候手动手法 el-select的onblur事件
handleOpen() {
this.$refs.select.blur()
}
问题3
由于这个dialog被单独分离成一个组件, 新增和修改的时候使用的都是这个, 所以当修改之后, 再次点击新增, 由于dialog被缓存了, form.dept被赋初始值null, 直接就触发了表单验证, 在打开dialog之前, 使用 clearValidate()都没有用
解决办法:
手动添加了一个v-if控制 treeselect组件的渲染, 条件与dialog出现的条件一致