el-tabs切换以及内容校验

在使用el-form进行表单校验的时候,往往会遇到这样一个问题:使用el-tabs进行切换,内外部链接,只能选择其一,往往会对其输入的链接内容进行校验,在form-item上面绑定固定的prop,达不到预期的效果;

以下是我在开发中,使用的一种方法,仅供参考;

<el-form-item label="选择链接方式" :prop="link">
          <el-tabs
            type="border-card"
            v-model="activeLink"
            @tab-click="handelClick"
          >
            <el-tab-pane label="内部链接" name="内部链接">
              <el-input
                v-if="activeLink == '内部链接'"
                v-model.trim="CurObject.conLink"
                placeholder="请输入内部链接，须带有http或https前缀"
                clearable
              />
              <div style="font-size: 12px;line-height: 20px;padding: 10px;color: grey;">注：内部链接是用户点击图片跳转后的文章URL。请复制平台用户端访问文章URL到上面输入框中。</div>
            </el-tab-pane>
            <el-tab-pane label="外部链接" name="外部链接">
              <el-input
                v-if="activeLink == '外部链接'"
                v-model.trim="CurObject.wrapLink"
                placeholder="请输入外部链接，须带有http或https前缀"
                clearable
              />
              <div style="font-size: 12px;line-height: 20px;padding: 10px;color: grey;">注：外部链接是用户点击图片后跳转外网某个文章的URL。</div>
            </el-tab-pane>
          </el-tabs>
 </el-form-item>

可以看到,内外链接分别对应不同的字段,而用与校验的link,则是在切换tabs的时,进行动态的改变

 handelClick(tab) {
      this.$refs.ruleForm.clearValidate(this.link)
      this.activeLink = tab.name
      if (this.activeLink == '内部链接') {
        this.link = 'conLink'
      } else {
        this.link = 'wrapLink'
      }
  },

切换前,进行置空,避免切换到另一方时,上次的校验仍存在;

校验部分的代码,如下

 rules: { 
       conLink: [{ required: true, validator: validateLink, trigger: 'blur' }],
       wrapLink: [
          { required: true, validator: validateLink, trigger: 'blur' },
        ],
      },

 const validateLink = (rule, value, callback) => {
      if (value == undefined) {
        callback(new Error('请输入链接'))
      }
      let httpReg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
      if (value !== '') {
        if (!httpReg.test(value)) {
          callback(new Error('链接不正确，请以http或https开始'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入链接'))
      }
    }

往往在进行新增或编辑数据的时候,涉及到初始化的过程;初始化的过程中,如果,没有对数据进行重新赋值,会在页面操作中,出现难以预估的bug;

我在初始化的时候,遇到这样一个问题:当我选择内部链接,明明已经在对应的el-input中输入内容了,打印也能打印出来,页面上面就是不会更新,当切换到外部链接,再切回来的时候,数据更新了;百度尝试,使用forceUpdate仍没有解决问题;

后来询问同事,才发现自己忽略了$set这样一个点;

因为我们在新增form表单,为了避免未输入对应的字段,(form绑定的CurObject:{});调用接口的时候,传过去的值为undefined的问题,往往会在CurObject写好form-item绑定的字段;这样的话,我们在编辑的时候,记得使用$set更新对应的字段,避免页面与内存数据不一致的问题的出现

 initData(val) {
      this.CurObject = {}
      if (val.id) {
        for (let key in val) {
          this.$set(this.CurObject, key, val[key])
        }
        delete this.CurObject.order
        delete this.CurObject.link
        delete this.CurObject.publishTime
        if (val.linkType) {
          this.activeLink = val.linkType
          this.link = this.activeLink == '内部链接' ? 'conLink' : 'wrapLink'
          //直接赋值,输入不进去内容,切换回来才有,加监听事件也不起效,$set
          if (val.linkType == '内部链接') {
            this.$set(this.CurObject, 'conLink', val.link)
          } else if (val.linkType == '外部链接') {
            this.$set(this.CurObject, 'wrapLink', val.link)
          }
        }
        if (val.coverImage && val.coverImage !== 'undefined') {
          this.bannerfileList.push({ url: val.coverImage })
        }
      } else {
        this.CurObject = {
          title: '',
          coverImage: '',
          linkType: '内部链接',
          conLink: '',
          wrapLink: '',
        }
      }