W260426/10_vuecli/vueadmin/src/views/level/LevelAdd.vue

<template>
    <div class="leveladd">
        <el-form :model="levelAddForm" ref="levelAddForm" label-width="100px" class="demo-ruleForm">
            <!-- rules 校验规则 -->
            <el-form-item label="等级名称" prop="levelname" :rules="[
                { required: true, message: '等级名称不能为空' },
            ]">
                <el-input v-model="levelAddForm.levelname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('levelAddForm')">提交</el-button>
                <el-button @click="resetForm('levelAddForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
// 引入添加等级的方法 通过解构赋值接收相应的方法
import { saveOrUpdateLevel } from '@/api/level'
export default {
    name: 'LevelAdd',
    data() {
        return {
            levelAddForm: {
                levelname: ''
            }
        };
    },
    methods: {
        submitForm(formName) {
            // 提交表单 element-ui 自带的方法
            this.$refs[formName].validate((valid) => {
                // 校验通过后 提交表单
                if (valid) {
                    alert('submit!');
                    // 调用添加等级的方法
                    // 定义传递的参数
                    let levelName = {
                        levelname: this.levelAddForm.levelname
                    }
                    saveOrUpdateLevel(levelName).then(res => {
                        console.log(res)
                    })
                } else {
                    // 校验不通过后 提示用户
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            // 重置表单 element-ui 自带的方法
            // 重置表单后 表单中的数据会被清空
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
.leveladd {
    width: 400px;
    margin:200px auto;
}
</style>