<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="named">
      <el-input v-model="form.named" ></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="form.sex" placeholder="请选择" >
        <el-option label="男" value="man"></el-option>
        <el-option label="女" value="woman"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmite('form')">确定</el-button>
      <el-button type="primary" @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el : "#app",
    data : {
      form:{
        named:"",
        sex:""
      },
      rules:{
        named :[{required: true, message: '请输入', trigger: 'blur'}],
        sex :[{required: true, message: '请输入', trigger: 'blur'}]
      }
    },
    methods: {
      onSubmite(formData) {
        this.$refs[formData].validate((valid) => {
          if (!valid) {
            console.log(this.form)
          }
        });
      },
      resetForm(formData) {
        this.$refs[formData].resetFields();//表单重置
      }
    }
  })
</script>
</html>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐