去除 treeselect 校验红框
时间: 2023-08-07 12:38:36 浏览: 38
要去除 treeselect 校验红框,可以在对应的样式文件中添加以下样式:
```
.el-form-item.is-error .el-tree .el-tree-node__content {
border-color: transparent;
}
```
这样就可以将校验红框去除了。需要注意的是,这样会影响所有使用了该样式的 treeselect 组件,如果只想去除某个特定的 treeselect 组件的校验红框,可以在该组件的样式中添加上述样式,并将其选择器更改为该组件的唯一标识。
相关问题
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`,此时在页面上会显示红色方框以及错误提示信息。
需要注意的是,这种方法只适用于简单的校验。如果需要实现更复杂的校验逻辑,建议使用表单验证库。
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 结合使用。