【vue实战项目】通用管理系统：信息列表，信息录入

短命女 2024-02-17 12:45 1阅读 0赞

本文为博主的vue实战小项目系列中的第六篇，很适合后端或者才入门的小伙伴看，一个前端项目从0到1的保姆级教学。前面的内容：

[【vue实战项目】通用管理系统：登录页-CSDN博客][vue_-CSDN]

[【vue实战项目】通用管理系统：封装token操作和网络请求-CSDN博客][vue_token_-CSDN]

[【vue实战项目】通用管理系统：api封装、404页-CSDN博客][vue_api_404_-CSDN]

[【vue实战项目】通用管理系统：首页-CSDN博客][vue_-CSDN 1]

[【vue实战项目】通用管理系统：学生列表-CSDN博客][vue_-CSDN 2]

![5be77e76576346b296dbcf7c3f3b46f6.gif][]

**目录**

1.概述

2.架子

3.校验规则

4.新增

5.查询

--------------------

## 1.概述 ##

首先我们要搞清楚学生信息列表页是用来干啥的：

用来对学生的基本信息进入管理，也就是录入基本信息，以及维护基本信息。

和前面的学生列表不同的是，学生列表是展示学生的关于学生这个身份的相关信息，是从学校的角度出发。学生信息列表是用来维护学生的更多、更全面的详细基本信息的，更多的是从一个自然人的角度出发的。

来看看整个页面长什么样子：

一个展示学生信息的列表，然后附带增删改的功能。

![7c794f00f4dc4f918d278f9d45c37dfc.png][]

当前工程目录结构，以及新编写的内容：

![1d69930db9a8404db2edef36927f5238.png][]

## 2.架子 ##

先来把页面的架子写出来，后面再完善功能。

首先来写展示学生信息的列表，直接将就以前学生列表页的表格来改一下就行，新建一个infoList组件。

代码示例：

<template>
      <div class="studentList">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="age" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="father" label="父亲" align="center">
          </el-table-column>
          <el-table-column prop="mather" label="母亲" align="center">
          </el-table-column>
          <el-table-column prop="address" label="家庭住址" align="center">
          </el-table-column>
          <el-table-column prop="time" label="入校时间" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData:[]
        }
      },
      methods:{
        edit(){
    
        },
        del(){
    
        }
      }
    };
    </script>
    
    <style lang="less">
    .studentList {
      .el-form-inline .el-form-item{
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

效果：

![49ce5b4420f946939c2054ebf52a8dc2.png][]

加个新增按钮出来。

代码示例：

<template>
      <div class="studentList">
        
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
          <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-button type="primary" @click="reset">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="find">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="compData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="sex_text" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="classNum" label="班级" align="center">
          </el-table-column>
          <el-table-column prop="number" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center">
          </el-table-column>
          <el-table-column prop="status_text" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </template>
    <script>
    import { students } from "@/api/api.js";
    import { studentDel } from "@/api/api.js";
    export default {
      data() {
        return {
          tableData: [],
          currentPage: 1, //当前页数
          pageSize: 10, //每页显示条数
          total: 0, //总条数
          formInline:{
            name:''
          }
        };
      },
      methods: {
        getData(params) {
          students(params).then((res) => {
            if (res.data.code === 200) {
              this.tableData = res.data.data;
              this.total = res.data.total;
              this.tableData.forEach((item) => {
                item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
                item.status === 1
                  ? (item.status_text = "已入学")
                  : (item.status_text = "未入学");
              });
            }
          });
        },
        //分页方法
        handleSizeChange(val) {
          this.pageSize = val;
          this.currentPage = 1;
        },
        handleCurrentChange(val) {
          this, (this.currentPage = val);
        },
        //删除
        del(row) {
          studentDel(row.id).then((res) => {
            if (res.data.code === 200) {
              this.$message({ message: "删除数据成功", type: "success" });
              this.getData();
            }
          });
        },
        //查询
        find(){
            this.getData(this.formInline.name);
        },
        //重置
        reset(){
            this.getData();
        }
      },
      created() {
        this.getData();
      },
      computed: {
        compData() {
          return this.tableData.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
          );
        },
      },
    };
    </script>
    
    <style lang="less">
    .studentList {
      .demo-form-inline, .el-form-item{
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

效果：

![b25f6a97a6934b22a99bad8370092fcf.png][]

点击新增按钮，弹出录入学生信息的弹框，接下来就是找弹框组件，去elementUI上找会发现没有弹框，只有对话框，所以我们就将就对话框来改写就是了。

![136882b8b5e847bda6381487578b2dc4.png][]

效果：

![d629e7b99a014354aea409e6be80561d.png][]

补全弹框里面的内容：

<template>
      <div class="infoList">
        
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item>
            <el-button type="primary" @click="addStudent">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="age" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="father" label="父亲" align="center">
          </el-table-column>
          <el-table-column prop="mather" label="母亲" align="center">
          </el-table-column>
          <el-table-column prop="address" label="家庭住址" align="center">
          </el-table-column>
          <el-table-column prop="time" label="入校时间" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible">
          <el-form :model="form" rules="rules" ref="form">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="name">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.father" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.mather" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入校时间" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.time" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button>确定</el-button>
            <el-button @click="dialogFormVisible=false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible:false,
          form:{
            name:''
          },
          rules:{
    
          }
        };
      },
      methods: {
        edit() {},
        del() {},
        addStudent(){
          this.dialogFormVisible=true;
        }
      },
    };
    </script>
    
    <style lang="less">
    .infoList {
      .demo-form-inline,
      .el-form-item {
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

效果：

![627f82020009405facf823eb3647b273.png][]

这里我们发现入校时间不可能去手动填写，需要去找一个时间插件来用：

![956db2fb338342198e2930f2ffb59e24.png][]

代码示例：

<template>
      <div class="infoList">
        
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item>
            <el-button type="primary" @click="addStudent">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="age" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="father" label="父亲" align="center">
          </el-table-column>
          <el-table-column prop="mather" label="母亲" align="center">
          </el-table-column>
          <el-table-column prop="address" label="家庭住址" align="center">
          </el-table-column>
          <el-table-column prop="time" label="入校时间" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible">
          <el-form :model="form" rules="rules" ref="form">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="父亲姓名"
              :label-width="formLabelWidth"
              prop="father"
            >
              <el-input v-model="form.father" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="母亲姓名"
              :label-width="formLabelWidth"
              prop="mather"
            >
              <el-input v-model="form.mather" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="家庭住址"
              :label-width="formLabelWidth"
              prop="address"
            >
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="入校时间"
              :label-width="formLabelWidth"
              prop="time"
            >
              <el-date-picker
                v-model="form.time"
                format="yyyy 年 MM 月 dd日"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              prop="phone"
            >
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button>确定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible: false,
          form: {
            name: "",
          },
          rules: {},
        };
      },
      methods: {
        edit() {},
        del() {},
        addStudent() {
          this.dialogFormVisible = true;
        },
      },
    };
    </script>
    
    <style lang="less">
    .infoList {
      .demo-form-inline,
      .el-form-item {
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

效果：

![b806521487c3422bbbad96f344bf42e3.png][]

补全data：

将sex默认为1后弹窗打开会有一个默认选项。

data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible: false,
          form: {
            name: "",
            sex: "1",
            age: "",
            father: "",
            mather: "",
            address: "",
            time: "",
            phone: ""
          },
          rules: {},
        };
      },

调整一下样式：

观察一下发现弹窗的每一项内容都是用的一个变量来表示宽度，于是给这个变量赋值为80px

瞬间整个弹窗清爽整齐了很多：

![478f389da35d40f982e8f275c695f2e2.png][]

再把它变窄一点：

<el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="500px">

![b4f37bdfedbd4b708d191891763ed603.png][]

然后我们把弹窗录入的数据打印出来看看，是不是对的：

<template>
      <div class="infoList">
        
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item>
            <el-button type="primary" @click="addStudent">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="age" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="father" label="父亲" align="center">
          </el-table-column>
          <el-table-column prop="mather" label="母亲" align="center">
          </el-table-column>
          <el-table-column prop="address" label="家庭住址" align="center">
          </el-table-column>
          <el-table-column prop="time" label="入校时间" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="父亲姓名"
              :label-width="formLabelWidth"
              prop="father"
            >
              <el-input v-model="form.father" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="母亲姓名"
              :label-width="formLabelWidth"
              prop="mather"
            >
              <el-input v-model="form.mather" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="家庭住址"
              :label-width="formLabelWidth"
              prop="address"
            >
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="入校时间"
              :label-width="formLabelWidth"
              prop="time"
            >
              <el-date-picker
                v-model="form.time"
                format="yyyy 年 MM 月 dd日"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              prop="phone"
            >
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="sure('form')">确定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible: false,
          form: {
            name: "",
            sex: "1",
            age: "",
            father: "",
            mather: "",
            address: "",
            time: "",
            phone: ""
          },
          rules: {},
          formLabelWidth:"80px"
        };
      },
      methods: {
        edit() {},
        del() {},
        addStudent() {
          this.dialogFormVisible = true;
        },
        sure(form){
          console.log(form,this.form)
        }
      },
    };
    </script>
    
    <style lang="less">
    .infoList {
      .demo-form-inline,
      .el-form-item {
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

![aeefb08cf3524a2f830311f978b31b5d.png][]

## 3.校验规则 ##

弹窗里面有输入框，那么自然就需要对输入进行校验，接下来开始编写校验规则。规则可以写简单点，把必填项列出来即可。

data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible: false,
          form: {
            name: "",
            sex: "1",
            age: "",
            father: "",
            mather: "",
            address: "",
            time: "",
            phone: ""
          },
          rules: {
            name:[{required:true,message:'请输入姓名'}],
            sex:[{required:true,message:'请输入性别'}],
            age:[{required:true,message:'请输入年龄'}],
            address:[{required:true,message:'请输入地址'}],
            time:[{required:true,message:'请输入入学时间'}],
            phone:[{required:true,message:'请输入联系方式'}],
          },
          formLabelWidth:"80px"
        };
      },

写好规则后，当然是在点击确定时触发这个校验规则：

methods: {
        edit() {},
        del() {},
        addStudent() {
          this.dialogFormVisible = true;
        },
        sure(form){
          this.$refs[form].validate(valid=>{
            if(valid){
              console.log(form,this.form)
            }
          })
        }
      },

效果：

![fba23e2184334ca4aab7bd44be1e1ae0.png][]

## 4.新增 ##

接下来就是完善新增方法，也就是在sure方法里调用api来新增学生信息。在api.js里加入新增学生信息的api。

export function info(data){
        return service({
            method:'post',
            url:'/student/info',
            data
        })
    }

在infoList组件里调用api来完成新增

import {info} from '@/api/api'
    
    sure(form){
          this.$refs[form].validate(valid=>{
            if(valid){
              info(this.form).then(res=>{
                console.log(res.data.code)
                if(res.data.code===200){
                  //新增成功后关闭窗口
                  this.dialogFormVisible=false
                }
              })
            }
          })
        }

## 5.查询 ##

刚刚做完了新增功能，我们会发现新增了但是数据没有渲染出来，那是以为我们还没有做查询接口。这里来做一个查询接口。

export function getInfo(){
        return service({
            method:'get',
            url:'/student/info'
        })
    }

封装方法：

import {getInfo} from '@/api/api'
    
    getData(){
          getInfo().then(res=>{
            console.log(res)
            if(res.data.code===200){
              this.tableData=res.data.data
            }
          })
        }

页面初始化数据

created(){
        this.getData()
      }

效果：

![151d5208be5444da95bd2672e2153523.png][]

最终组件代码：

<template>
      <div class="infoList">
        
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item>
            <el-button type="primary" @click="addStudent">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="father" label="父亲" align="center">
          </el-table-column>
          <el-table-column prop="mather" label="母亲" align="center">
          </el-table-column>
          <el-table-column prop="address" label="家庭住址" align="center">
          </el-table-column>
          <el-table-column prop="time" label="入校时间" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="父亲姓名"
              :label-width="formLabelWidth"
              prop="father"
            >
              <el-input v-model="form.father" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="母亲姓名"
              :label-width="formLabelWidth"
              prop="mather"
            >
              <el-input v-model="form.mather" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="家庭住址"
              :label-width="formLabelWidth"
              prop="address"
            >
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="入校时间"
              :label-width="formLabelWidth"
              prop="time"
            >
              <el-date-picker
                v-model="form.time"
                format="yyyy 年 MM 月 dd日"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              prop="phone"
            >
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="sure('form')">确定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    import {info} from '@/api/api'
    import {getInfo} from '@/api/api'
    export default {
      data() {
        return {
          tableData: [],
          //控制是否弹窗的标志位
          dialogFormVisible: false,
          form: {
            name: "",
            sex: "1",
            age: "",
            father: "",
            mather: "",
            address: "",
            time: "",
            phone: ""
          },
          rules: {
            name:[{required:true,message:'请输入姓名'}],
            sex:[{required:true,message:'请输入性别'}],
            age:[{required:true,message:'请输入年龄'}],
            address:[{required:true,message:'请输入地址'}],
            time:[{required:true,message:'请输入入学时间'}],
            phone:[{required:true,message:'请输入联系方式'}],
          },
          formLabelWidth:"80px"
        };
      },
      methods: {
        edit() {},
        del() {},
        addStudent() {
          this.dialogFormVisible = true;
        },
        sure(form){
          this.$refs[form].validate(valid=>{
            if(valid){
              info(this.form).then(res=>{
                if(res.data.code===200){
                  //新增成功后关闭窗口
                  this.dialogFormVisible=false
                }
              })
            }
          })
        },
        getData(){
          getInfo().then(res=>{
            console.log(res)
            if(res.data.code===200){
              this.tableData=res.data.data
            }
          })
        }
      },
      created(){
        this.getData()
      }
    };
    </script>
    
    <style lang="less">
    .infoList {
      .demo-form-inline,
      .el-form-item {
        text-align: left;
      }
      .el-pagination {
        text-align: left;
        margin-top: 20px;
      }
    }
    </style>

[vue_-CSDN]: https://blog.csdn.net/Joker_ZJN/article/details/134279231?spm=1001.2014.3001.5501
[vue_token_-CSDN]: https://blog.csdn.net/Joker_ZJN/article/details/134388945?spm=1001.2014.3001.5501
[vue_api_404_-CSDN]: https://blog.csdn.net/Joker_ZJN/article/details/134425895?spm=1001.2014.3001.5501
[vue_-CSDN 1]: https://blog.csdn.net/Joker_ZJN/article/details/134475625?spm=1001.2014.3001.5501
[vue_-CSDN 2]: https://blog.csdn.net/Joker_ZJN/article/details/134614132?spm=1001.2014.3001.5501
[5be77e76576346b296dbcf7c3f3b46f6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/50b361e061654400adeb455d8f783eac.png
[7c794f00f4dc4f918d278f9d45c37dfc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3748ba2c40db4b4c88cb769b7dfbe05f.png
[1d69930db9a8404db2edef36927f5238.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/e589cdd9764849dcbea9b73ead491b63.png
[49ce5b4420f946939c2054ebf52a8dc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3e003244f8684ef5a9b1cbb1e8b7f9d0.png
[b25f6a97a6934b22a99bad8370092fcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/4dbedefcf9564a9cb2126614986b0b20.png
[136882b8b5e847bda6381487578b2dc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/8d52a47e71224cacb1852c77fa6b4edf.png
[d629e7b99a014354aea409e6be80561d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d64835b590874b0d82ef7171baba2f9d.png
[627f82020009405facf823eb3647b273.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a62245f0cf874a55a59b4eb2836320f9.png
[956db2fb338342198e2930f2ffb59e24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d343f13dd9de449c8bf13a01caeec691.png
[b806521487c3422bbbad96f344bf42e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d5a72b54e4e648f3bec45e70346ecb71.png
[478f389da35d40f982e8f275c695f2e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/76d6622ed58342cebf503dd44addc2e1.png
[b4f37bdfedbd4b708d191891763ed603.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/bf702480e5d642ac98b9ebc9f418719b.png
[aeefb08cf3524a2f830311f978b31b5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/84e0357a32594debb82763db37db37a8.png
[fba23e2184334ca4aab7bd44be1e1ae0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d20656e4becf40c6b460de9dc5c6de59.png
[151d5208be5444da95bd2672e2153523.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/1d1ccf124e914ef4b52064d8628eb61b.png