主要功能 (表单自定义效验  && 单独效验某个值)

表单自定义效验 

export default {
        data() {
        // 定义效验
        const validatePersonCharge = (rule, value, callack) => {
          // value 是绑定值的内容
    if (value == '张三') {
            callack(new Error('不能为张三'))
          } else {
            callack()
          }
        }
        return {
            form: {
                name: ''
            },
             rules: {
                name: [
                  { required: true, message: '请输入名称', trigger: 'blur' },
            // 使用
            { validator: validatePersonCharge, trigger: 'blur' }
                ],
            }
        }
    }
}

单独效验某个值 

methods: {
    // 下拉框事件
    select (e) {
      // 点击复选框单独对某个值进行效验 ("selectCharge") 这个是你 prop 绑定的名称
         this.$refs["form"].validateField("selectCharge")
    }
}

源代码

js

data () {
    // 自定义效验
    const validatePersonCharge = (rule, value, callack) => {
       // value 是 v-model 绑定的值
      if (value == '请选择任务负责人') {
       // 抛出效验文字
        callack(new Error('请选择任务负责人'))
      } else {
        callack()
      }
    }
    return {
      taskRules: {
        selectPersonCharge: [
          { required: true, message: ‘请选择负责人’, trigger: ‘blur’ },
          { validator: validatePersonCharge, trigger: ‘blur’ }
        ],
      }, 

             taskForm: {
             selectPersonCharge: '请选择任务负责人',
        　　　　personnel: [
         　　 　　{
           　　 　　checked: false,
          　　  　　label: ‘张小刚’
         　　　　 },
       　　　　   {
      　　  　　    checked: false,
     　　  　　     label: ‘李小红’
      　　  　　  },
     　　   　　  {
       　　  　　   checked: false,
     　　    　　   label: ‘王小明’
       　　 　　  },
      　　  　　  {
      　　 　　     checked: false,
      　　  　　    label: ‘周小伟’
      　　  　　  },
      　　   　　 {
      　　   　　   checked: false,
     　　     　　  label: ‘李小刚’
       　　 　　  }
     　　  　　 ] 

        }
    }
}
methods: {
    stopDefault (e) {
      e.stopPropagation()

      let peopleArray = []
      this.taskForm.personnel.forEach(item => {
        if (item.checked) {
          peopleArray.push(item.label)
        }
      })

      this.taskForm.selectPersonCharge = peopleArray.join(‘、’)
      if (peopleArray.length == 0) {
        this.taskForm.selectPersonCharge = ‘请选择任务负责人’
      }

      // 点击复选框单独对某个值进行效验
      this.$refs[“form”].validateField(“selectPersonCharge”)
    }, 

}

HTML 

<el-form-item label="请选择任务负责人:"
                      prop="selectPersonCharge">
          <el-dropdown split-button>
            <span>{{taskForm.selectPersonCharge}}</span>
            <el-dropdown-menu class="select-person"
                              slot="dropdown">
              <el-dropdown-item v-for="(item, index) in taskForm.personnel"
                                :key="index"
                                :command="item.label">
                <el-checkbox v-model="item.checked"
                             @change.native="stopDefault($event)"
                             :label="item.label"></el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>

css

// 下拉菜单的宽度
.select-person li {
  width: 150px;
}
// 图标
::v-deep .el-dropdown .el-dropdown__caret-button {
  padding: 7px 7px 11px 7px;
  border-left: 1px solid #dcdfe6;
}

::v-deep .el-dropdown .el-dropdown__caret-button i {
  font-size: 20px;
}

 

原文地址：http://www.cnblogs.com/wqddmg/p/16881573.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性