treeselect 表单校验不出现红色方框

要实现 treeselect 的表单校验并显示红色方框，需要结合表单验证库使用。以下是一个示例代码： ```html <template> <ValidationProvider :rules="rules" v-slot="{ errors }"> <treeselect v-model="selected" :options="options" /> <span v-if="errors.length" class="text-red-500">{{ errors[0] }}</span> </ValidationProvider> </template> <script> import Treeselect from '@riophae/vue-treeselect'; import { required } from 'vee-validate/dist/rules'; import { extend } from 'vee-validate'; import { ValidationProvider } from 'vee-validate'; 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' } ] }; }, computed: { rules() { return { required }; } } }; </script> ``` 在上面的代码中，我们使用了 `vee-validate` 库来进行表单验证，并在 `treeselect` 组件外部包裹了 `ValidationProvider` 组件进行验证。在 `ValidationProvider` 组件上绑定了 `rules` 计算属性，定义了 `selected` 的验证规则为必填项。当 `selected` 未选中时，`errors` 数组会包含一条错误信息，此时在页面上会显示红色方框以及错误提示信息。需要注意的是，如果你的 `vee-validate` 版本为 4.x，那么可以将 `ValidationProvider` 组件直接替换成 `ValidationProvider4`。如果你的项目中使用了其他的表单验证库，也可以将其与 treeselect 结合使用。

阅读全文