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出现的条件一致