为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第13天 Vue Element+Node.js开发企业通用管理后台系统(第3章)

标签:
Vue.js

课程名称:Vue Element+Node.js开发企业通用管理后台系统(第3章)
课程章节: 第3章 Element-UI入门
主讲老师:Sam
课程内容:

今天学习的内容包括:

  • Element-UI入门

课程收获:

  1. 表单基本用法
  • el-form 容器,通过 model 绑定数据
  • el-form-item 容器,通过 label 绑定标签
  • 表单组件通过 v-model 绑定 model 中的数据
<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="审批人">
        <el-input v-model="data.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="data.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      data: {
        user: 'sam',
        region: '区域二'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.data)
    }
  }
}
</script>
  1. 表单校验基本用法
  • 定义校验规则,可以绑定到 el-form 或 el-form-item
data() {
  const userValidator = (rule, value, callback) => {
    if (value.length > 3) {
      callback()
    } else {
      callback(new Error('用户名长度必须大于3'))
    }
  }
  return {
    data: {
      user: 'sam',
      region: '区域二'
    },
    rules: {
      user: [
        { required: true, trigger: 'change', message: '用户名必须录入' },
        { validator: userValidator, trigger: 'change' }
      ]
    }
  }
}
  • 指定 el-form-item 的 prop 属性
<el-form-item label="审批人" prop="user">
  <el-input v-model="data.user" placeholder="审批人" clearable></el-input>
</el-form-item>

其中:

  • hide-required-asterisk:隐藏必录标识
  • inline-message:验证消息是否在一行显示
  1. 表单校验高级用法

用法一:动态改变校验规则

  • rules 只包含一个校验规则
{
  rules: {
      user: [
        { required: true, trigger: 'change', message: '用户名必须录入' },
      ]
  }
}
  • 动态添加 rules
addRule() {
    const userValidator = (rule, value, callback) => {
      if (value.length > 3) {
        this.inputError = ''
        this.inputValidateStatus = ''
        callback()
      } else {
        callback(new Error('用户名长度必须大于3'))
      }
    }
    const newRule = [
      ...this.rules.user,
      { validator: userValidator, trigger: 'change' }
    ]
    this.rules = Object.assign({}, this.rules, { user: newRule })
}

用法二:手动控制校验状态

  • 设置 el-form-item 属性
<el-form-item
  label="用户名"
  prop="user"
  :error="error"
  :validate-status="status"
>
<!-- ... -->
</el-form-item>
  • 自定义 status 和 error
showError() {
  this.status = 'error'
  this.error = '用户名输入有误'
},
showSuccess() {
  this.status = 'success'
  this.error = ''
},
showValidating() {
  this.status = 'validating'
  this.error = ''
}

最后,附上课程截图 ending~

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
539
获赞与收藏
171

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消