2

vue实现增删改查(内附源代码)

 1周前 阅读数 2
以下为 快照 页面,建议前往来源网站查看,会有更好的阅读体验。
原文链接: http://www.cnblogs.com/hxz0618/p/14017583.html

VUE+Element实现增删改查

@

目录

  • VUE+Element实现增删改查

前言

&最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧。

因为自己写的样式没有别人做的好,因此我想用现成的UI框架,一直也没用过Element,就干脆趁机学一下吧。

实验步骤

  1. 首先引入一下element的css以及js
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  1. 然后引入需要用到的vue相关的js文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. 下面说一下HTML结构
<div id="app">
    <h1>职位的增删改查</h1>
    <div class="head">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
            </el-col>
        </el-row>
        <el-button type="primary" @click="addUser" class="add-btn" plain>添加信息</el-button>
    </div>
    <!-- 主体内容 -->
    <div class="body">
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="序号" width="180"><template slot-scope="scope"> {{scope.$index + 1 }} </template></el-table-column>
                <el-table-column prop="name" label="公司名" width="180"></el-table-column>
                <el-table-column prop="position" label="职位"></el-table-column>
                <el-table-column prop="major" label="专业"></el-table-column>
                <el-table-column prop="number" label="数量"></el-table-column>
                <el-table-column prop="birthday" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <!-- 编辑框 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div>
            <el-form ref="form" :model="editObj" label-width="80px">
                <el-form-item label="公司名"><el-input v-model="editObj.name"></el-input></el-form-item>
                <el-form-item label="职位"><el-input v-model="editObj.position"></el-input></el-form-item>
                <el-form-item label="专业"><el-input v-model="editObj.major"></el-input></el-form-item>
                <el-form-item label="数量"><el-input v-model="editObj.number"></el-input></el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</div>

这一段是element的表单以及编辑等样式 ,其中添加了一些click操作 后面需要用到

4. 加上基础的样式

<style>
        #app{
            width:1024px;
            margin: 0 auto; 
        }
        .add-btn{
            margin-top: 20px;
            width: 100%;
        }
        .body{
            margin-top:20px;
        }
    </style>

现在页面的基本样式就做好了,如下图所示:

7zEnEn.png!mobile
  1. 下面开始写vue代码,对各个功能进行处理操作

    了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则,定义一些变量 ,在methods进行我们的操作。

new Vue({
    el: '#app',
        data:{},
        methods:{}
})
data: function(){
                return{
                    userInfo:{  
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    },
                    tableData: [{
                        name:'互联网+学院',
                        position: '专职教师',
                        major: '对外贸易',
                        number: '2',
                    },{
                        name:'徐州重工',
                        position: '工厂车研发部工程师',
                        major: '精密机械制造',
                        number: '12',
                    },{
                        name:'北京青码科技',
                        position: '前端开发工程师',
                        major: 'Vue、React',
                        number: '4',
                    }
                    ],
                    dialogVisible: false,  
                    editObj:{
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    },
                    userIndex:0,
                }
            },

接下来我们添加methods

addUser() 是添加数据

delUser()是删除数据

editUser()是编辑数据

handleClose()是是否弹出编辑框

confirm()是确认信息并且传数据到表格中

在增加模块中,我做了信息判断,如果是信息是空就会弹出提示框,显示信息不能为空,

在删除模块中,点击可以删除一行信息

在修改模块中,会先将原本的信息拿到,然后再修改你需要修改的信息。

methods:{
              //添加
                addUser(){
                    if(!this.userInfo.name){
                        this.$message({
                            message: '请输入你的公司名!',
                            
                        });
                        return;
                    }
                    if(!this.userInfo.position){
                        this.$message({
                            message: '请输入你的职位!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (!this.userInfo.major) {
                        this.$message({
                            message: '请输入你的专业!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (!this.userInfo.number) {
                        this.$message({
                            message: '请输入数量!',
                            type: 'warning'
                        });
                        return;
                    }
                    this.tableData.push(this.userInfo);
                    this.userInfo = { 
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    };
                },

                //删除
                delUser(idx){
                    this.$confirm('确认删除此用户信息?')
                        .then(_ => {
                            this.tableData.splice(idx, 1);
                        })
                        .catch(_ => {});
                },
                //编辑
                editUser(item,idx){
                    this.userIndex = idx;
                    this.editObj = {
                        name: item.name,
                        position: item.position,
                        major: item.major,
                        number: item.number,
                    };
                    this.dialogVisible = true;
                },

                handleClose(){
                    this.dialogVisible = false;
                },

                confirm(){
                    this.dialogVisible = false;
                    Vue.set(this.tableData, this.userIndex, this.editObj);
                        }
                    },
                })

总结:

通过这次练习,让我知道了Element框架是怎么使用的,Element框架写代码做样式的确方便,以后有什么要求低的作业可以拿来使用,目前的我毕竟还是一个学生,我还是需要多锻炼写代码,手写样式的能力。

最后: 附整个项目的源代码,本项目仅供学习交流。

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Vue增删改查</title>
    <style>
        #app{
            width:1024px;
            margin: 0 auto; 
        }
        .add-btn{
            margin-top: 20px;
            width: 100%;
        }
        .body{
            margin-top:20px;
        }
    </style>
   
</head>
<body>
    <div id="app">
        <h1>职位的增删改查</h1>
        <div class="head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
                </el-col>
            </el-row>
            <el-button type="primary" @click="addUser" class="add-btn" plain>添加信息</el-button>
        </div>
        <!-- 主体内容 -->
        <div class="body">
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="序号" width="180"><template slot-scope="scope"> {{scope.$index + 1 }} </template></el-table-column>
                    <el-table-column prop="name" label="公司名" width="180"></el-table-column>
                    <el-table-column prop="position" label="职位"></el-table-column>
                    <el-table-column prop="major" label="专业"></el-table-column>
                    <el-table-column prop="number" label="数量"></el-table-column>
                    <el-table-column prop="birthday" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 编辑框 -->
        <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="editObj" label-width="80px">
                    <el-form-item label="公司名"><el-input v-model="editObj.name"></el-input></el-form-item>
                    <el-form-item label="职位"><el-input v-model="editObj.position"></el-input></el-form-item>
                    <el-form-item label="专业"><el-input v-model="editObj.major"></el-input></el-form-item>
                    <el-form-item label="数量"><el-input v-model="editObj.number"></el-input></el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        
        new Vue({
            el:'#app',
            data: function(){
                return{
                    userInfo:{  
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    },
                    tableData: [{
                        name:'互联网+学院',
                        position: '专职教师',
                        major: '对外贸易',
                        number: '2',
                    },{
                        name:'徐州重工',
                        position: '工厂车研发部工程师',
                        major: '精密机械制造',
                        number: '12',
                    },{
                        name:'北京青码科技',
                        position: '前端开发工程师',
                        major: 'Vue、React',
                        number: '4',
                    }
                    ],
                    dialogVisible: false,  
                    editObj:{
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    },
                    userIndex:0,
                }
            },
            methods:{
                //添加
                addUser(){
                    if(!this.userInfo.name){
                        this.$message({
                            message: '请输入你的公司名!',
                            
                        });
                        return;
                    }
                    if(!this.userInfo.position){
                        this.$message({
                            message: '请输入你的职位!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (!this.userInfo.major) {
                        this.$message({
                            message: '请输入你的专业!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (!this.userInfo.number) {
                        this.$message({
                            message: '请输入数量!',
                            type: 'warning'
                        });
                        return;
                    }
                    this.tableData.push(this.userInfo);
                    this.userInfo = { 
                        name:'',
                        position: '',
                        major: '',
                        number: '',
                    };
                },

                //删除
                delUser(idx){
                    this.$confirm('确认删除此用户信息?')
                        .then(_ => {
                            this.tableData.splice(idx, 1);
                        })
                        .catch(_ => {});
                },
                //编辑
                editUser(item,idx){
                    this.userIndex = idx;
                    this.editObj = {
                        name: item.name,
                        position: item.position,
                        major: item.major,
                        number: item.number,
                    };
                    this.dialogVisible = true;
                },

                handleClose(){
                    this.dialogVisible = false;
                },

                confirm(){
                    this.dialogVisible = false;
                    Vue.set(this.tableData, this.userIndex, this.editObj);
                        }
                    },
                })
    </script>

</body>
</html>

猜你喜欢

  • 18

    参加 2018 ngChina 开发者大会,特别喜欢 Michael Hladky 奥地利帅哥的 RxJS 分享,现在拿出来好好学习工作坊的内容(工作坊Demo地址),结合这个示例,做了一个改进版本,实现更简洁,逻辑更直观。 一、摩斯密码是什么?

  • 43

    vue element mongodb express 效果图 前言 最近一直想学下node,毕竟会node的前端更有市场。但是光看不练,感觉还是少了点什么,就去github上看别人写的项目,收获颇丰,于是准备自己照葫芦画瓢写一个。 作为程序员,一

  • 57
    • GAD腾讯游戏开发者平台 gad.qq.com 3年前
    • 快照

    【竹林】绘画步骤图-内附高清PSD

    Gad(http://gad.qq.com/)-腾讯游戏开发者平台,面向游戏从业者,打造开放、互联、回馈、分享的专业游戏人社区,提供免费组件下载、专业知识学习、组队游戏制作、项目孵化渠道等服务.

  • 56
    • Cocoa China www.cocoachina.com 2年前
    • 快照

    iOS开发中常见bug!(内附解答方法)

  • 39

    本文旨在用最通俗的语言讲述最枯燥的基本知识 nginx作为一个高性能的web服务器,想必大家垂涎已久,蠢蠢欲动,想学习一番了吧,语法不多说,网上一大堆。下面博主就nginx的非常常用的几个功能做一些讲述和分析,学会了这几个功能,平常的开发和部署就不是什么问题

  • 18

    一、虚拟专用网的定义虚拟专用网就是在两个网络实体之间建立的一种受保护的连接,这两个实体可以通过点到点的链路直接相连,但通常情况下他们会相隔较远的距离。对于定义中提到的“受保护”一词,可以从以下几个方面理解:通过使用加密技术防止数据被窃听。通过数据...

  • 7
    • 掘金 juejin.im 9个月前
    • 快照

    2020必备VS Code 插件(内附 gif 图)

    推荐几个非常实用的 VS Code 插件. 附 gif 图. 提升开发效率的插件 1. Better Comments Better Comments 你可以使用不同的前缀来让注释显示为不同的颜色。 非常适合快速扫描并发现重要的代码片段。 若使用的话, 建议

  • 210

  • 88

    以下为利用iview-admin+django做的一个最基本的增删改查例子。前端iview-admingitclonehttps://github.com/iview/iview-admin.gitcdiview-admin修改.eslintrc.json17"no-console":["off"],21"no-fallthrough":0,npminstallnpmrundev如果报错修改bui

  • 53

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼的人" 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间

关于极客头条


聚合每日国内外有价值,有趣的链接。

AD