首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

VUE+Element实现增删改查的示例源码

Posted in Vue.js onNovember 23, 2020

前言

&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。
因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学一下吧。

实验步骤

首先引入一下element的css以及js

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后引入需要用到的vue相关的js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

下面说一下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操作 后面需要用到

加上基础的样式

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

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

VUE+Element实现增删改查的示例源码

下面开始写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" rel="external nofollow" rel="external nofollow" >
  <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>

以上就是VUE+Element实现增删改查的示例源码的详细内容，更多关于VUE+Element实现增删改查的资料请关注三水点靠木其它相关文章！

VUE+Element实现增删改查的示例源码

- Author -

古有风情·月下谈之

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
深入了解Vue3模板编译原理
Nov 19 #Vue.js
发报机(1) LW(1) GWEN(1) FM(4) 调幅(1) SW(1) 调频(4) 电磁辐射(1) SWL(1) ad hoc(1)
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP 面向对象程序设计（oop）学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php自动获取关键字的方法
2015/01/06 PHP
php 数组元素快速去重
2017/05/05 PHP
php查询内存信息操作示例
2019/05/09 PHP
JavaScript库 开发规则
2009/01/31 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
柯基袜：Corgi Socks
2017/01/26 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
职工运动会邀请函
2014/01/19 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
班级年度安全计划书
2014/05/01 职场文书
企业文明单位申报材料
2014/05/16 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
教师见习报告范文
2014/11/03 职场文书
交通事故被告答辩状
2015/05/22 职场文书
公文写作：教你写“建议书”
2019/05/07 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python