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

要为 Vue treeselect 组件添加校验样式（红色外框），可以在对应的样式文件中添加以下样式：

.el-form-item.is-error .vue-treeselect .vue-treeselect__input {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245,108,108,.2);
}

这样就可以在表单校验出错时，为 treeselect 组件添加红色外框了。需要注意的是，这样会影响所有使用了该样式的 treeselect 组件，如果只想为某个特定的 treeselect 组件添加校验样式，可以在该组件的样式中添加上述样式，并将其选择器更改为该组件的唯一标识。

相关问题

vue-treeselect 校验不出现红色方框

要实现 vue-treeselect 的校验功能并显示红色方框，需要在使用该组件时结合表单验证库使用。以下是一个示例代码：

<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 校验不出现红色方框的解决办法

要实现 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 结合使用。