如何给vue-treeselect添加自定义校验

本文已参与「新人创作礼」活动，一起开启掘金创作之路 element的form表单验证 ，官网上是这样的，文字会在红框下方出现 今天说的自定义校验样式，是在框内，如下图，只说vue-treeselect，这个有点特殊： 首先要有获取焦点和失去焦点的事件，还要有表单校验失败走的方法 先说获取焦点和失去焦点的事件，如果是el-input，可以用focus和blur事件，但是treeselect有点特殊的地方在于，这两个事件不起作用，要用它自己的事件，open和close 在自己的页面上绑定这两个事件，如果treeselect是直接放在表单里的，那获取ref的时候可以直接获取，如果treeselect是放在列表里，给列表包裹的表单，那就要给ref加索引，已区分是哪一列的treeselect要校验，如果不加索引，会出现一个bug，最后一行的treeselect的三角箭头是黑色的，甚至可能点不动。

这里以vxe-table举例，form表单包裹的时候，如有校验项，要以列表数组名+索引+字段的形式绑校验

 <template #default="{ row, rowIndex }">
                      <el-form-item :prop="'tableData.' + rowIndex + '.assetTypeCode'" :rules="rules.assetTypeCode">
                        <TreeSelect
                          :ref="'treeselect' + rowIndex"
                          v-model="row.assetTypeCode"
                          :options="deptOptions"
                          :normalizer="normalizer"
                          clearable
                          no-options-text="暂无可用选项"
                          noChildrenText="数据加载中"
                          noResultsText="暂无匹配项"
                          loadingText="数据加载中"
                          :matchKeys="['name', 'code']"
                          no-results-text="没有匹配的搜索结构"
                          placeholder="请选择xxx名称"
                          style="width: 100%"
                          :appendToBody="true"
                          :disable-branch-nodes="true"
                          :load-options="loadOptions"
                          @open="itemopen(rowIndex)"
                          @close="itemClose(rowIndex)"
                          @select="node => treeHandleSelect(rowIndex, node)"
                        >
                          <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                            [{{ node.raw.code }}]{{ node.raw.label }}
                          </div>
                          <!-- <div slot="value-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                    [{{ node.raw.code }}]{{ node.raw.label }}
                  </div> -->
                          <div slot="value-label" slot-scope="{ node }">{{ row.assetTypeCode ? `[${row.assetTypeCode}]` : '' }}{{ row.assetTypeName }}</div>
                        </TreeSelect>
                      </el-form-item>
                    </template>

 // treeselect校验
    itemopen(index) {
      let treeRef = 'treeselect' + index
      if (this.$refs[treeRef].$el) {
        this.$refs[treeRef].$el.className = 'treeselect__placeholder '
      }
      if (this.$refs[treeRef].$el) {
        this.$refs[treeRef].$el.className = 'treeselect__placeholder '
      }
    },
    // treeselect校验
    itemClose(index) {
      let treeRef = 'treeselect' + index
      if (this.$refs[treeRef].$el) {
        this.$refs[treeRef].$el.className = 'treeselectBiTian treeselect__placeholder '
      }
    },

在公共样式中定义treeselectBiTian 这个类名，这样所有页面都有共用类名

.treeselectBiTian {
  width: 100%;
  color: red !important;
}

在公共js文件中定义校验方法，或也可以直接引入到自己页面中

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

在form校验的地方使用