21.新增管理员页面制作

新增管理员页面制作

1.修改AdminUser.vue

vue 复制代码
<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="searchParm" :inline="true" size="default">
            <el-form-item>
                <el-input v-model="searchParm.nickName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- 搜索按钮 -->
                <el-button icon="Search"></el-button>
                <!-- danger 按钮 plain 纯按钮浅色 -->
                <el-button type="danger" plain>重置</el-button>
                <el-button type="primary" @click="addBtn">
                    新增
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 新增、编辑弹框 -->
        <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
            @on-close="onClose" @on-confirm="commit">
            <template v-slot:content>
                <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false"
                    size="default">
                    <el-form-item prop="nickName" label="姓名:">
                        <el-input v-model="addModel.nickName"></el-input>
                    </el-form-item>
                    <el-form-item prop="sex" label="性别:">
                        <el-radio-group v-model="addModel.sex">
                            <el-radio :label="'0'">男</el-radio>
                            <el-radio :label="'1'">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="phone" label="电话:">
                        <el-input v-model="addModel.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="username" label="账号:">
                        <el-input v-model="addModel.username"></el-input>
                    </el-form-item>
                    <el-form-item  prop="password" label="密码:">
                        <el-input v-model="addModel.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="status" label="状态:">
                        <el-radio-group v-model="addModel.status">
                            <el-radio :label="'0'">启用</el-radio>
                            <el-radio :label="'1'">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
        </SysDialog>
    </el-main>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { FormInstance } from "element-plus";

//表单ref属性
const addRef = ref<FormInstance>();

//获取弹框属性
const { dialog, onClose } = useDialog();

//搜索绑定的对象
const searchParm = reactive({
    userId: "",
    username: "",
    password: "",
    nickName: "",
    phone: "",
    sex: "",
    status: "",
});

//新增弹框
const addBtn = () => {
    dialog.height = 300;
    dialog.visible = true;
};

//新增表单绑定的对象
const addModel = reactive({
    userId: "",
    username: "",
    password: "",
    nickName: "",
    phone: "",
    sex: "",
    status: "",
});

//表单验证规则
const rules = {
    nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
    username: [{ required: true, message: "请输入账户", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    status: [{ required: true, message: "请选择状态", trigger: "blur" }],
};

//新增、编辑提交
const commit = () => {
  //表单验证
  addRef.value?.validate(async (valid) => {
    if (valid) {
        console.log(addModel);
        //提交表单数据
        //关闭弹框
        dialog.visible = false;
      }
    
  });
};
</script>

<style scoped lang="scss"></style>

2. 修改Index.vue

scss 复制代码
 .mymain{
        background-color: rgb(244, 244, 244);
        padding: 0px;
    }

有个组件名写错了,重构,SysDialog.vue

3. 效果图


相关推荐
醉の虾7 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧16 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm26 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng184029 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep70138 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm42 分钟前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的44 分钟前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游