vue实现数据的增删改

最新推荐文章于 2023-07-28 19:22:47 发布
最新推荐文章于 2023-07-28 19:22:47 发布
阅读量331 收藏
点赞数
分类专栏： vue 增删改 文章标签： vue 增改删 弹出div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WSLHX944174132/article/details/103035315
版权

最近学习vue，在此做个简单记录
演示图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <meta charset="utf-8"  http-equiv="Access-Control-Allow-Origin" content="*">

    <title>index</title>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
 <!-- 引入Vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.tablediv{
  /* 设置div大小 */
  width: 1000px;

  /* 设置div位置 */
  position:absolute;
  top: 200px;
  left: 500px;

  /* 设置div字体居中 */
  text-align:center;
}
table{
  /* 设置table大小 */
  width: 100%;

  /* 设置字体大小 */
  font-size: 30px;
}
th{
  /* 设置th字体加粗 */
  font-weight: 900;

   /* 设置th背景颜色 */
  background-color: rgb(0, 153, 255);

   /* 设置th字体颜色 */
  color: rgb(255, 254, 254);
}

/* 设置表格隔行变色 */
table tr:nth-child(even){
   /* 背景颜色 */
   background-color: rgba(199, 199, 199, 0.363);
}

/*  设置鼠标停留一行改变背景颜色 */
tr:hover{
   /* 背景颜色 */
  background-color: rgb(197, 197, 197) !important;
  /* !important 设置优先级*/
}

h1{
  /* 设置h1(标题)位置 */
  position:absolute;
  top: 10px;
  left: 850px;

  /* 字体大小 */
  font-size: 50px;
}
.updbutton{
  /* 设置button(修改按钮) */
  width: 80px;
  height: 30px;
  margin-left: 10px;
  background-color: rgb(0, 255, 64);
}
.updbutton:hover{
  /* 设置button(修改按钮)  鼠标停留样式 */

  /* 字体颜色 */
 color: rgb(255, 255, 255);

 /* 背景颜色 */
 background-color: rgb(255, 145, 0);
}

.delbutton{
  /* 设置button(删除按钮) */
  width: 80px;
  height: 30px;
  background-color: rgb(255, 0, 0);
}


.delbutton:hover{
  /* 设置button(删除按钮)  鼠标停留样式 */

  /* 字体颜色 */
 color: rgb(255, 255, 255);

 /* 背景颜色 */
 background-color: rgb(255, 145, 0);
}

.addbutton{
  /* 设置button(添加按钮) */
  
  /* 位置  大小 */
  position: absolute;
  left: -30%;
  top:-20%;
  width: 150px;
  height: 50px;
  

  /* 背景颜色 */
  background-color: rgb(0, 4, 255);

  /* 字体颜色 */
  color: #ffffff;
  font-size: 30px;
  z-index: 900;
}
.addbutton:hover{
  /* 设置button(添加按钮)  鼠标停留样式*/
  
  /* 背景颜色 */
  background-color: rgb(255, 123, 0);

  /* 字体颜色 */
  color: #ffffff;
  font-size: 30px;
}







.heisebeijing{
  /* 设置 添加修改操作时的黑色背景 */

  /* 位置  大小 */
  position: absolute;
  left: -0.5px;
  top:-0.5px;
  width: 100%;
  height: 100%;

  /* 显示在表格之上，添加修改之下 */
  z-index: 1000;

  /* 透明 */
  opacity: 0.8;
  /* 背景颜色 */
  background-color: #020202;
  /* 设置初始隐藏 */
  display: none;
}

.mydiv{
  /* 添加/修改 div样式设置 */

  /* 位置大小 */
  position: absolute;
  left: 30%;
  top:15%;
  width: 800px;
  height: 450px;

  /* 背景颜色 */
  background-color: #fff;

    /* 显示在表格，黑色背景之上 */
  z-index: 1000;

  
  /* 设置div字体居中 */
  text-align:center;

    /* 设置初始隐藏 */
    display: none;
}

h2{
  /* 添加/修改 标题设置 */
  font-weight: 900;
  font-size: 50px;
  margin: 10px;
}
label{
  /* 添加/修改 提示设置 */
  font-weight: 400;
  font-size: 30px;
  margin: 10px;
}
input{
  /* 弹出框的输入框 */
  width: 300px;
  height: 40px;
  font-size: 30px;

  /* 设置字体居中 */
  text-align:center;
}

.btadd{
  /* 弹出框的添加按钮 */
    /* 位置  大小 */
    position: absolute;
  right:  20%;
  bottom:10%; 
  width: 150px;
  height: 50px;
  
  /* 背景颜色 */
  background-color: rgb(0, 255, 0);

  /* 字体颜色 */
  color: #ffffff;
  font-size: 30px;
  z-index: 900;
}
.btadd:hover{
  /* 弹出框的添加按钮  鼠标停留样式*/
  background-color: rgb(255, 94, 0);
}
.btqx{
  /* 弹出框的取消按钮 */
  
  /* 位置  大小 */
  position: absolute;
  left: 20%;
  bottom:10%; 
  width: 150px;
  height: 50px;
  

  /* 背景颜色 */
  background-color: rgb(3, 112, 255);

  /* 字体颜色 */
  color: #ffffff;
  font-size: 30px;
  z-index: 900;
}
.btqx:hover{
  /* 弹出框的取消按钮  鼠标停留样式*/
  background-color: rgb(255, 94, 0);
}
</style>

</head>
<body >
<div class="heisebeijing"></div><!-- 黑色背景 -->
<div class="mydiv"><!-- 添加/修改 -->
  <h2 id="title">标题</h2>
  <hr/>
  <br>
  <!-- onfocus 点击时选中所有     maxlength  长度限制     required="required" 不能为空       oninput = "value=value.replace(/[^\d]/g,'')"  只允许输入数字    -->
  <label>编号</label><input id="id"  oninput = "value=value.replace(/[^\d]/g,'')" type="text" onfocus="this.select()"   maxlength="7" required="required">
  <br>  <br>  <br>  <br>
  <label>名字</label><input id="name" type="text" onfocus="this.select()" maxlength="4" required="required">

  <button class="btadd" id ="btadd" onclick="btadd()">添加</button>
  <button class="btqx" onclick="btqx()">取消</button>
</div>

<h1>数据增删改</h1>
<div id="tablediv" class="tablediv"><!-- 防止table的div，方便设置表格的位置和大小 -->
  <button class="addbutton" v-on:click="add()">添加</button>
  <table border="1px solid #ccc" cellspacing="0" cellpadding="0"><!-- table，设置table框线 -->
    <tr>
    <th>NO.</th>
    <th>编号</th>
    <th>名字</th>
    <th style="width: 250px;">操作</th>
  </tr>
  <template  v-for="(tablelists, index) in tablelist" style="width: 100%;" > 
    <!-- 循环输出赋值 -->
      <tr>
          <td>{{index}}</td>
          <td>{{tablelists.id}}</td>
          <td>{{tablelists.name}}</td>
          <td><button class="delbutton"  v-on:click="deletea(index,tablelists)">X</button><button class="updbutton"  v-on:click="update(index,tablelists.id,tablelists.name)">修改</button></td>
          <!--  删除按钮                                                                                                修改按钮           参数 -->
      </tr> 
  </template>
  </table>
</div>




<script>   

  var shuju=[{name:'a',id:1323},{name:'a1',id:13223}];
  //测试数据
  var divn=0;//标志位，判断是添加还是修改
  var topvm = new Vue({
    el : "#tablediv",
    data:{
        tablelist:'',
    },
    methods:{
      successtishi () {
                this.$Message.success('追加成功');
            },
      deletea(index,tablelists){
        //删除操作，此次操作只在页面上删除,没有删除数据库的
        //两个参数，index是编号，
        //tablelists是数据  console.log(tablelists.name);
        topvm.tablelist.splice(index,1);
      },
      add(){
        //添加操作，显示div，修改title名字
        $(".heisebeijing").show();
        $(".mydiv").show();
        document.getElementById("title").innerHTML ="添加操作";
        document.getElementById("btadd").innerHTML ="添加";
        divn=-1;//修改标志位
      },
      update(index,id,name){
       //修改操作，显示div，修改title名字，给input赋值
        $(".heisebeijing").show();
        $(".mydiv").show();
        document.getElementById("id").value=id;
        $("#id").attr("disabled",true); //  设置id不可修改
        document.getElementById("name").value=name;
        document.getElementById("title").innerHTML ="修改操作";
        document.getElementById("btadd").innerHTML ="修改";
        divn=index;//修改标志位
      }
    }
});
topvm.tablelist=shuju;


function guanbi(){
  //关闭弹框函数，便于复用
  $(".heisebeijing").hide();
    $(".mydiv").hide();
    document.getElementById("id").value="";
    $("#id").attr("disabled",false); //  设置id可修改
    document.getElementById("name").value="";
}
$(".heisebeijing").click(function(){
    // 点击黑色背景，关闭弹出div
    guanbi();
});

function btadd(){
    // 添加操作
    var id=document.getElementById("id").value;
    var name=document.getElementById("name").value;
    name = name.replace(/\s*/g,"");//去除空格
    if(divn==-1){//判断是添加
        shuju.push({id:id,name:name});
        //此出也可以写做  topvm.tablelist.push({id:id,name:name});
    }else{
      shuju.splice(divn,1,{id:id,name:name});
    }

    guanbi();
}
function btqx(){
    //取消操作
    guanbi();
}
</script>
</body>
</html>
WSLHX944174132
关注
专栏目录
vue实现对表格数据的增删改查
weixin_30279671的博客
07-10 4199
在管理员的一些后台页面里，个人中心里的数据列表里，都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里，我们可以录入新用户的信息，也可以对既有的用户信息进行修改。在vue中，我们更应该专注于对数据的操作和处理。 比如我们有一个这样的页面： 我们在这个页面里，就实现了增删改查4个功能，点击链接查看demo【http://www.xiabingbao.com/demo/vue-curd/...
Vue 的 增 删 查 改
fanfanking的博客
07-23 164
vue的增加 1.虚假的添加（不增加入数据库） <section> <div class="form-group"> <label>编号</label> <input type="text" v-model="role.ID" /> </div> <div class="form-group"> <l
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
vue项目的增删改查，表单验证
qq_62797382的博客
07-28 961
最终的 BookList.vue。
vue实现表格增删改查效果的实例代码
08-29
本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 常见数据增删改查，
Xiaoxiao_Zheng的博客
03-27 884
需求： 数据的增删改查 场景： vue + iview 点击增加，抽屉填写内容，保存数据，修改数据 实现： 1 list 列表 父组件 <template> <div class="dic-list"> <button @click="onAddDic>增加</button> <Table...
vue实现节点增删改功能
10-16
通过上述的实现方式，我们可以在Vue.js应用中创建出具有增删改功能的动态树形组件，这样的组件具有很好的通用性和可复用性，能够大幅提升开发效率并减少重复工作量。在具体实现时，开发者应根据实际需求进行适当的...
使用vue基础语句实现学生的增删改操作
04-22
在本文中，我们将深入探讨如何使用Vue.js的基础语句来实现学生管理系统的增删改功能，并结合实时日志记录学生信息的变化。Vue.js是一个流行的前端JavaScript框架，它提供了声明式的数据绑定和组件化的能力，使得构建...
vue实现节点增删改功能.docx
01-21
在Vue.js框架中，实现节点的增删改功能是一项常见的需求，特别是在构建具有层级结构的数据展示，例如树形结构的应用中。以下是如何在Vue中实现这些功能的具体步骤和相关知识点： 1. **模板（Template）**： - `v-...
element-curd-template:基于element ui的curd模板
04-28
element-curd-template 基于element ui的curd模板 构建步骤 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 主要依赖 vue vue-router vuex axios less mockjs normalize.css element-ui 目录说明 . ├── App.vue 根实例 ├── api HTTP API ├── components 组件 ├── config 配置 ├── main.js 入口js ├── mock mo
ThinkPHP框架实现数据增删改
10-19
本文将详细介绍如何在ThinkPHP框架下实现数据的增加、删除和修改功能。 首先，我们来看增加（Add）操作。在ThinkPHP中，我们可以创建一个控制器（Controller）中的方法来处理数据的添加。例如，创建一个名为`add`的...
VUE饿了么树形控件添加增删改功能的示例代码
08-29
VUE饿了么树形控件添加增删改功能的示例代码 本篇文章主要介绍了VUE饿了么树形控件...本篇文章介绍了VUE饿了么树形控件添加增删改功能的示例代码，提供了树形控件的基本使用和增删改功能的实现方式，具有实用价值。
vue实现数据增删查
Avery_xu的博客
01-03 462
1添加数据（v-model数据双向绑定，使数据实时更新） 界面代码（附带bootstrap表格样式 ） <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> ...
vue 简单的增删改功能
weixin_34233618的博客
07-04 161
刚开始学习vue ，简单的练习了一下，就写了一个简单的dome ，里面包括 增加，删除 ，修改功能 。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, in...
Vue对数据的增删改
weixin_47174945的博客
09-26 661
Vue对数据的增删改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table
用vue实现列表的增删改查基本功能（简单易懂）
热门推荐
why0925123的博客
10-10 1万+
用vue实现列表的增删改查基本功能（简单易懂）
用vue实现增删改查
m0_64344470的博客
05-08 2976
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
考研复习-英语二真题考试题集-带答案
最新发布
09-14
英语二考研真题复习资料，带答案版
vue加element实现表格增删改
09-03
使用Vue和Element UI可以非常方便地实现表格的增删改功能。 首先，我们需要在Vue中引入Element UI的Table组件，用于显示表格数据。可以通过在Vue组件中引入以下代码来实现： ```javascript <template> <el-table :data="tableData"> <!-- 表格列的定义 --> </el-table> </template> <script> import { Table } from 'element-ui'; export default { components: { 'el-table': Table }, data() { return { tableData: [] // 表格数据 }; } } </script> ``` 接下来，我们需要在data函数中定义tableData，用于存储表格的数据。可以通过向tableData数组中添加对象的方式来定义表格的行数据。例如： ```javascript data() { return { tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 } ] }; } ``` 然后，我们可以使用Element UI提供的Button组件来实现新增、删除和编辑操作。例如： ```javascript <el-button @click="addRow">新增</el-button> <el-button @click="deleteRow">删除</el-button> <el-button @click="editRow">编辑</el-button> ``` 在Vue组件的methods中定义对应的方法来实现表格的增删改功能。例如： ```javascript methods: { // 新增一行数据 addRow() { this.tableData.push({ name: '', age: '' }); }, // 删除选中的行数据 deleteRow() { const selectedRows = this.$refs.table.selection; selectedRows.forEach(row => { const index = this.tableData.indexOf(row); this.tableData.splice(index, 1); }); }, // 编辑选中的行数据 editRow() { // 编辑操作 } } ``` 通过以上步骤，即可使用Vue和Element UI实现表格的增删改功能。根据具体需求，可以进一步自定义表格列的定义、编辑操作等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值