vue treeselect 组件校验样式（添加红色外框）

要实现 vue-treeselect 的校验功能并显示红色方框，需要在使用该组件时结合表单验证库使用。以下是一个示例代码： ```html <template> <div> <treeselect v-model="selected" :options="options" /> <span v-show="!selected" class="text-red-500">必填项</span> </div> </template> <script> import Treeselect from '@riophae/vue-treeselect'; export default { components: { Treeselect }, data() { return { selected: null, options: [ { id: 1, label: '选项1', children: [ { id: 2, label: '选项1-1' }, { id: 3, label: '选项1-2' } ] }, { id: 4, label: '选项2' } ] }; } }; </script> ``` 在上面的代码中，我们没有使用表单验证库，而是使用了 `v-show` 指令判断 `selected` 是否为空来显示错误信息。当 `selected` 未选中时，`!selected` 返回 `true`，此时在页面上会显示红色方框以及错误提示信息。 需要注意的是，这种方法只适用于简单的校验。如果需要实现更复杂的校验逻辑，建议使用表单验证库。

### Vue Treeselect 组件使用教程 #### 安装 在项目根目录下执行如下命令来安装 `@riophae/vue-treeselect`： ```bash npm install --save @riophae/vue-treeselect ``` 此操作会将依赖项下载到项目的 `node_modules` 文件夹中，并将其保存至 `package.json` 的依赖列表里[^1]。 #### 配置 完成安装之后，在全局注册该插件以便于在整个应用程序内访问。可以在入口文件（通常是 main.js 或 app.js）中加入下面这段代码： ```javascript import Vue from 'vue' import Treeselect from '@riophae/vue-treeselect' // 导入样式表 import '@riophae/vue-treeselect/dist/vue-treeselect.css' Vue.component('Treeselect', Treeselect) ``` 上述脚本实现了对 `Vue-Treeselect` 插件及其默认样式的加载与挂载，使得后续可以直接通过 `<treeselect>` 标签调用组件[^2]。 #### 使用方法 接下来展示如何在一个具体的 Vue 单文件组件(SFC) 中运用已配置好的 `Vue-Treeselect` 控制器。假设存在一个名为 `ExampleComponent.vue` 的 SFC，则其模板部分可以这样编写： ```html <template> <div> <!-- ...其他HTML结构... --> <label>选择分类：</label> <Treeselect class="treeselect-main" v-model="selectedCategoryIds" :options="categoriesTree" :multiple="true" :show-count="true" :appendToBody="true" z-index="9000" placeholder="请选择类别..." /> <!-- ...更多页面元素... --> </div> </template> <script> export default { data() { return { selectedCategoryIds: [], // 用户所选中的节点ID集合 categoriesTree: [ // 这里定义可供选择的数据源... ] } }, } </script> <style scoped lang="scss"> .search { ::v-deep .vue-treeselect { width: 198px; height: 28px; line-height: 28px; margin-top: 7px; font-size: 12px; &__control { height: 28px; } &__placeholder, &__single-value { line-height: 28px; } } } </style> ``` 以上实例展示了带有自定义类名 `.treeselect-main` 和特定属性设定的 `Vue-Treeselect` 实际应用情形；同时提供了针对 mini 版本 Element UI 设计的一组 CSS 规则用于调整外观尺寸[^3][^4]。