JavaScript
搜索
分类

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

作者：古有风情·月下谈之 时间：2024-05-09 09:32:47　

前言

&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用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>

来源：https://www.cnblogs.com/hxz0618/p/14017583.html?utm_source=tuicool&utm_medium=referral

标签：VUE,Element,增删改查
0
投稿

猜你喜欢

  • 利用Opencv实现图片的油画特效实例

    2022-01-26 14:31:59

  • javascript中的变量是传值还是传址的？

    2024-04-10 10:52:28

  • Python学习思维导图(必看篇)

    2021-03-19 02:13:13

  • thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例

    2024-05-03 15:52:31

  • Python pomegranate库实现基于贝叶斯网络拼写检查器

    2021-06-17 19:27:51

  • 浅谈Python中的闭包

    2022-03-08 06:18:31

  • php7性能提升的原因详解

    2024-05-03 15:34:19

  • JS实现数组/对象数组删除其中某一项

    2024-04-29 13:36:37

  • python hbase读取数据发送kafka的方法

    2023-09-07 14:39:46

  • django获取from表单multiple-select的value和id的方法

    2021-11-03 13:13:31

  • python实现简单颜色识别程序

    2022-07-15 09:34:47

  • MySQL如何计算连续登录天数

    2024-01-17 18:05:00

  • JavaScript给数组添加元素的6个方法

    2024-04-30 08:46:47

  • mysql 5.7.17 winx64安装配置图文教程

    2024-01-28 04:57:13

  • zen coding的dreamweaver插件安装教程

    2010-01-12 13:30:00

  • PHP实现手机号码中间四位用星号（*）隐藏的自定义函数分享

    2023-11-06 06:36:22

  • 基于JS实现简单的样式切换效果代码

    2024-04-22 13:08:53

  • Python基于回溯法子集树模板实现8皇后问题

    2023-09-25 08:34:45

  • Sql Server 数据库超时问题的解决方法

    2009-01-13 14:11:00

  • python中xlrd模块的使用详解

    2021-02-13 12:05:27
    • asp之家 网络编程 m.aspxhome.com