vue-treeselect 校验不出现红色方框的解决办法

要实现 vue-treeselect 的校验功能并显示红色方框，需要在使用该组件时结合表单验证库使用。以下是一个示例代码：
<template>
<div>
<treeselect v-model="selected" :options="options" />
<span v-show="errors.has('selected')" class="text-red-500">{{ errors.first('selected') }}</span>
</div>
</template>

<script>
import { required } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';
import { ValidationProvider } from 'vee-validate';
import Treeselect from '@riophae/vue-treeselect';

extend('required', {
...required,
message: '必填项'
});

export default {
components: {
Treeselect,
ValidationProvider
},
data() {
return {
selected: null,
options: [
{
id: 1,
label: '选项1',
children: [
{
id: 2,
label: '选项1-1'
},
{
id: 3,
label: '选项1-2'
}
]
},
{
id: 4,
label: '选项2'
}
]
};
},
validations() {
return {
selected: {
required
}
};
}
};
</script>
登录后复制
在上面的代码中，我们使用了 vee-validate 库来进行表单验证，并在 Treeselect 组件上添加了 ValidationProvider 组件进行验证。在 validations 中定义了 selected 的验证规则为必填项。当 selected 未选中时，errors.has('selected') 返回 true，此时在页面上会显示红色方框以及错误提示信息。
需要注意的是，如果你的 vee-validate 版本为 4.x，那么可以将 ValidationProvider 组件直接替换成 ValidationProvider4。另外，如果你的项目中使用了其他的表单验证库，也可以将其与 vue-treeselect 结合使用。