Vue.js增删改

最新推荐文章于 2024-04-23 18:27:15 发布

最新推荐文章于 2024-04-23 18:27:15 发布

阅读量194

点赞数

文章标签： html5 vue.js

本文链接：https://blog.csdn.net/Vue1024/article/details/108866398

版权

本文展示了如何使用Vue.js和Element-UI库创建一个学生管理系统，包括添加、删除和编辑学生的功能。页面包含输入字段用于录入学生信息，如入学时间、班级、姓名、学号、性别、电话和家庭住址。表格展示所有学生数据，并提供编辑和删除按钮。编辑时，会弹出一个窗口供用户更新信息，点击确认后更新数据。

摘要由CSDN通过智能技术生成

Vue增删改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="table">
        <div class="add">
            <input type="date" placeholder="入学时间" v-model="obj.time" />
            <input type="text" placeholder="班级" v-model="obj.clas" />
            <input type="text" placeholder="姓名" v-model="obj.name" />
            <input type="text" placeholder="学号" v-model="obj.id" />
            <input type="radio" checked="checked" v-model="obj.age" name="2" value="男">男
            <input type="radio" v-model="obj.age" name="2" value="女">女
            <input type="text" placeholder="电话" v-model="obj.del" />
            <!-- <input type="text" placeholder="家庭住址" v-model="obj.home" /> -->
            <select v-model="obj.home" style="height:28px;">
                  <option disabled value="">家庭住址：</option>
                  <option>河北省</option>
                  <option>山东省</option>
                  <option>辽宁省</option>
                  <option>黑龙江省</option>
                  <option>甘肃省</option>
                  <option>吉林省</option>
                  <option>青海省</option>
                  <option>河南省</option>
                  <option>江苏省</option>
                  <option>河南省</option>
                  <option>湖南省</option>
                  <option>湖北省</option>
                  <option>浙江省</option>
                  <option>江西省</option>
                  <option>广东省</option>
                  <option>云南省</option>
                  <option>福建省</option>
                  <option>陕西省</option>
                  <option>山西省</option>
                </select>
            <el-button type="primary" @click="add()">新增</el-button>

            </style>
        </div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>入学时间</th>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>家庭住址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,i) in items" :key="i">
                    <td>{{i+1}}{{item.idd}}</td>
                    <td>{{item.time}}</td>
                    <td>{{item.clas}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.del}}</td>
                    <td>{{item.home}}</td>
                    <td>
                        <el-button type="danger" icon="el-icon-delete" circle class="delete" @click="del(i)"></el-button>
                        <el-button type="primary" icon="el-icon-edit" circle class="edit" @click="edit(item)"></el-button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div id="layer" v-if="layer">
            <div class="mask">
                <div class="title">
                    编辑
                    <span @click="layer=false">X</span>
                </div>
                <div class="content">
                    <input style="width: 270px;" type="date" placeholder="入学时间" v-model="editItems.time">
                    <input style="width: 270px;" type="text" placeholder="班级" v-model="editItems.clas" />
                    <input style="width: 270px;" type="text" placeholder="姓名" v-model="editItems.name" />
                    <input style="width: 270px;" type="text" placeholder="学号" v-model="editItems.id" />
                    <input type="radio" v-model="editItems.age" name="2" value="男">男
                    <input type="radio" v-model="editItems.age" name="2" value="女">女
                    <input style="width: 270px;" type="text" placeholder="电话" v-model="editItems.del" />
                    <input style="width: 270px;" type="text" placeholder="家庭住址" v-model="editItems.home">
                    <el-button type="success" @click="genxing()"> 更新</el-button>
                    <el-button type="warning" @click="layer=false">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vm = new Vue({
        el: "#table",
        data: {
            layer: false, //弹层的显示与隐藏
            obj: {
                time: '',
                clas: '',
                name: '',
                id: '',
                age: '',
                del: '',
                home: '',
            },
            //数组对象
            items: [{
                time: "2020-05-05",
                clas: '193411',
                name: '张三',
                id: '19341101',
                age: '男',
                del: '13433786202',
                home: '湖南省',
                idd: 1
            }, {
                time: "2020-01-01",
                clas: '193411',
                name: '李四',
                id: '19341102',
                age: '女',
                del: '13433786202',
                home: '湖北省',
                idd: 4
            }, {
                time: "2020-03-03",
                clas: '193411',
                name: '王五',
                id: '19341103',
                age: '男',
                del: '13433786202',
                home: '湖南省',
                idd: 5
            }],
            editItems: {} //编辑数据+
        },
        methods: {
            add: function() { //添加数据
                //必填判断
                if (!this.obj.time || !this.obj.clas || !this.obj.name || !this.obj.id || !this.obj.age || !this.obj.del || !this.obj.home) {
                    return;
                } else {
                    alert("数据正在添加中。。。。。。。")
                }
                var _idd = Math.max(...this.items.map(function(v) {
                    return v.idd
                })) + 1; //idd的最大值
                //求出所有的idd

                //Math.max(1,4,7)
                this.items.push({
                    time: this.obj.time,
                    clas: this.obj.clas,
                    name: this.obj.name,
                    id: this.obj.id,
                    age: this.obj.age,
                    del: this.obj.del,
                    home: this.obj.home,
                    idd: _idd,
                });
                this.obj = {}; //添加完数据清空
            },
            del: function(i) { //删除
                this.items.splice(i, 1);
            },
            edit: function(item) {
                this.layer = true;
                // this.editItems=item;//浅拷贝
                this.editItems = {
                    time: item.time,
                    clas: item.clas,
                    name: item.name,
                    id: item.id,
                    age: item.age,
                    del: item.del,
                    home: item.home,
                    idd: item.idd
                }
            },
            genxing: function() { //确认更新
                for (var i = 0; i < this.items.length; i++) {
                    if (this.items[i].idd == this.editItems.idd) {
                        this.items[i] = this.editItems;
                        this.layer = false; //弹层隐藏
                    }
                }
            }
        }
    })
</script>

</html>