vue3+Element-plus表单举例

一、安装vue3脚手架， npm create vue@latest
详细查看官网https://cn.vuejs.org/guide/quick-start.html

二、下载Element-plus
官网：https://element-plus.gitee.io/zh-CN/component/overview.html

npm i element-plus@latest

如果需要用到element-plus的图标，我们要把图标一起下下来

npm install @element-plus/icons-vue

在main.js中全局引入

示例：

<script setup>
  import { ref ,reactive } from 'vue';
  const minData = reactive({
    list_data:[{
      name:'张三',
      password:'12345',
      email:'1211@qq.com'
    },{
      name:'李四',
      password:'123456',
      email:'1211666@qq.com'
    }]
  })

  const form = reactive({
    name: '',
    password: '',
    email: ''
  })
  const rules = {
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 5, max: 10, message: '用户名必须是5-10位字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { validator: (rule, value, callback)=>{
        if (value === '')
            callback();
        else {
            if (!/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value)) {
                callback(new Error('邮件地址无效'));
            } else
                callback();
        }
      },trigger: 'blur'},
    ]
  }
  const ruleFormRef = ref();
  //新增
  const onSubmit = (formName)=>{
    formName.validate((valid) => {
        if (valid) {
            minData.list_data.push(form);
        } else {
            return false;
        }
    });
  }
  //清除
  const reset = ()=>{
    Object.keys(form).map(key => {
      delete form[key]
    })
  }
</script>

<template>
  <el-main>
    <div>
      <table>
        <thead>
          <tr>
            <td>姓名</td>
            <td>密码</td>
            <td>邮箱</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in minData.list_data" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.password}}</td>
            <td>{{item.email}}</td>
          </tr>
        </tbody>
      </table>
      <div class="addInfo">
        <!-- <addInfo></addInfo> -->
        <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="auto" style="max-width: 600px">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(ruleFormRef)">新增</el-button>
            <el-button @click="reset">清除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-main>
</template>
<style scoped>
.addInfo{
  width: 600px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0.02rem 0.1rem 0px rgba(150, 150, 150, 0.35);
  border-radius: 0.1rem;
  margin: 10px 0;
  padding: 20px;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse; /* 移除表格内边框间的间隙 */
}
</style>