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

kopppo7

已于 2022-09-06 16:07:35 修改

阅读量1.4k

点赞数 5

文章标签： vue

于 2022-09-05 16:58:59 首次发布

本文链接：https://blog.csdn.net/kopppo7/article/details/126708481

版权

1. 红框样式

.treeselectBiTian {
  width: 100%;
  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() {
      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() {
      this.$nextTick(() => {
        this.$refs.form.validateField('deptId')
        // 清除红框
        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')
          }
        }
      })
    },