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')
}
}
})
},