AI 助理
备案控制台登录注册
开发者社区 开发与运维 文章 正文

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

2024-06-12 72 发布于吉林
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【vue实战项目】通用管理系统：信息列表，信息录入

1.概述

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

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

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

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

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

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


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>

效果：

加个新增按钮出来。

代码示例：

<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>

效果：

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

<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">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" 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:''
      }
    };
  },
  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>

效果：

补全弹框里面的内容：

<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>

效果：

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

代码示例：

<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>

效果：

补全data：

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

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

调整一下样式：

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

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

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

再把它变窄一点：

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

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

<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>

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)
        }
      })
    }
  },

效果：

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()
  }

效果：

最终组件代码：

<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>

文章标签：
JavaScript
API
关键词：
vue系统VUE.js
系统VUE.js
信息VUE.js
vue信息VUE.js
录入VUE.js
_BugMan
+关注
223文章
目录
打赏
0
3
3
0
22
分享
相关文章
卓伊凡
|
1月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
卓伊凡
144 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
卓伊凡
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
卓伊凡
107 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
卓伊凡
|
1月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
卓伊凡
102 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
卓伊凡
|
1月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
卓伊凡
113 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
刘大猫.
|
5月前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
刘大猫.
75 1
小宋1021
|
3月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
177 1
勿入红尘啊
|
19天前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
勿入红尘啊
94 56
游客lijmi4663rgsa
|
9天前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具，适合自定义复杂的流程图。文章从环境要求（Node.js v20+ 和 Vue 3.3+）、基础入门案例、自定义功能（节点与连线的定制、事件处理）到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性，虽然预定义内容较少，但提供了丰富的 API 支持深度定制。同时，文中还分享了关于句柄（handles）的使用方法，以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid，总结 Vue Flow 更适合需要高度自定义和复杂需求的场景，并附带多个相关技术博客链接供进一步学习。
游客lijmi4663rgsa
45 1
游客lijmi4663rgsa
|
9天前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。 博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
23 0
心疼你的一切
|
1月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
62 9

热门文章

最新文章

  • 1
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    10
  • 2
    vue渲染页面的原理
    63
  • 3
    高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
    38
  • 4
    Pinia 如何在 Vue 3 项目中进行安装和配置？
    14
  • 5
    极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
    28
  • 6
    管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
    15
  • 7
    你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
    13
  • 8
    属性描述符初探——Vue实现数据劫持的基础
    11
  • 9
    vue2和vue3的响应式原理有何不同？
    24
  • 10
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
    8001
  • 1
    vue2和vue3的响应式原理有何不同？
    24
  • 2
    高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
    53
  • 3
    管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
    31
  • 4
    属性描述符初探——Vue实现数据劫持的基础
    23
  • 5
    你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
    26
  • 6
    极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
    45
  • 7
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    118
  • 8
    Pinia 如何在 Vue 3 项目中进行安装和配置？
    48
  • 9
    vue渲染页面的原理
    94
  • 10
    Vue中的class和style绑定
    49

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    阿里云oss简介和如何对接使用
    目录
    AI助理

    你好，我是AI助理

    可以解答问题、推荐解决方案等