Vue3 Element Plus 表单生成代码示例 - script setup

<template>
  <el-form :model='form' label-width='80px'>
    <el-form-item label='用户名'>
      <el-input v-model='form.username'></el-input>
    </el-form-item>
    <el-form-item label='密码'>
      <el-input v-model='form.password' type='password'></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type='primary' @click='submitForm'>提交</el-button>
      <el-button @click='resetForm'>重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

const form = ref({
  username: '',
  password: ''
});

function submitForm() {
  console.log(form.value);
}

function resetForm() {
  form.value.username = '';
  form.value.password = '';
}
</script>