【学习打卡】第13天 Vue Element+Node.js开发企业通用管理后台系统（第3章）@慕课网原创_慕课网

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

今天学习的内容包括：

Element-UI入门

课程收获：

表单基本用法

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>

表单校验基本用法

定义校验规则，可以绑定到 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：验证消息是否在一行显示

表单校验高级用法

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

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~