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

本文主要是介绍vue treeselect 组件校验样式（添加红色外框），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

import Treeselect from '@riophae/vue-treeselect'import '@riophae/vue-treeselect/dist/vue-treeselect.css'

 一、第一中方式

1、html代码

<el-col :span="12" class="col-tree-select"><el-form-item label="作业单位" prop="jobDept"><treeselect v-model="form.jobDept" :options="deptOptions" :normalizer="normalizer" placeholder="请选择作业单位" :disabled="this.disabled"@input="changeP(form.jobDept)" /></el-form-item></el-col>

2、写入内容时验证不会消失，所以给组件添加 input 事件

changeP(item) {this.$nextTick(() => {this.$refs.form.validateField('jobDept')})},

3、css样式

  .col-tree-select .el-form-item.is-error .vue-treeselect__control,.col-tree-select .el-form-item.is-error .vue-treeselect__control:focus {border-color: #ff4949;}

 

二、第二种方式

1. 红框样式

  .treeselectBiTian {border-color: red;}

2. 验证时给 treeselect 组件加红框方法

formItemVerify(formDom) {let inputDomArr = formDom.$el.getElementsByClassName('is-required')for (let i = 0; i < inputDomArr.length; i++) {// vuetreeselect组件if (inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0] !== undefined && !inputDomArr[i].classList.contains('is-success')) {inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0].classList.add('treeselectBiTian')}}},

3. 校验时验证调用此方法

submitForm: function () {this.$refs["form"].validate(valid => {if (valid) {}else {this.formItemVerify(this.$refs.form)}});},

4. 写入内容时验证不会消失，所以给组件添加 input 事件

<treeselect 
v-model="form.deptId" 
:options="deptOptions" 
:show-count="true" 
placeholder="请选择归属部门" 
:searchable="false" 
@input="changeP" />

// 去除校验changeP(item) {if (item === undefined) {let inputDomArr = this.$refs.form.$el.getElementsByClassName('vue-treeselect__control')inputDomArr[0].classList.add('treeselectBiTian')this.$refs.form.validateField('jobDept')} else {this.$nextTick(() => {this.$refs.form.validateField('jobDept')// 清除红框this.removeBorder()})}},

// 去除 treeselect 校验红框removeBorder() {this.$nextTick(() => {let inputDomArr = this.$refs.form.$el.getElementsByClassName('is-success')for (let i = 0; i < inputDomArr.length; i++) {inputDomArr[i].getElementsByClassName('vue-treeselect__control'[0], 'inputDomArr')// vuetreeselect组件if (inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0] !== undefined) {inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0].classList.remove('treeselectBiTian')}}})},

这篇关于vue treeselect 组件校验样式（添加红色外框）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---