Vue前端实现对数据的增删改查

已于 2022-11-14 11:06:55 修改
阅读量7k 收藏 66
点赞数 9
文章标签： html vue.js css
于 2021-08-27 16:49:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42274795/article/details/119956266
版权

Vue实现对数据的增删改查

git上找的代码，纯属为了学习一下。

  1. 首先在html页面上事先写好表格和搜索框
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dem.css">
</head>

<body>
    <div class="st">
        <h1>Vue实现对数据的增删改查</h1>
    </div>
    <div class="container" id="app">
        <div>
            <input type="text" placeholder="search" @input="search" list="cars" class="search">
            <datalist id="cars">
                <option :value="item" v-for="item in searchlist"></option>
            </datalist>
            <input type="button" class="add" @click="add" value="新增">
        </div>
        <div>
            <table>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>省份</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr v-cloak v-for="(item ,index) of slist">
                    <td>{{index+1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.province}}</td>
                    <td>{{item.hobby.join('|')}}</td>
                    <td>
                        <a href="javascript:;" @click="showOverlay(index)">修改</a>
                        <a href="javascript:;" @click="del(index)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
    </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js">
</script>
<script src='dem.js'></script>

</html>
  1. 对表格和搜索框进行样式调整
    样式代码如下：
[v-cloak] {
    display: none;
}

html {
    background: linear-gradient( 190.89deg, rgba(13, 30, 40, 0.784) 0%, rgba(5, 14, 18, 0.637) 99.75%);
}

table {
    border: 1px solid #ccc;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 10px;
    width: 100%;
    color: #ccc;
}

table td,
table th {
    height: 30px;
    border: 1px solid #ccc;
    /* background: #fff; */
    font-size: 15px;
    padding: 3px 3px 3px 8px;
}

table th:first-child {
    width: 30px;
}


/* //标题 */

.container,
.st {
    width: 1000px;
    margin: 10px auto 0;
    font-size: 13px;
    font-family: 'Microsoft YaHei';
    color: #ccc;
    /* background: rgba(13, 30, 40, 0.784); */
}


/* 文本框 */

.container .search {
    padding: 4px;
    font-size: 15px;
    /* line-height: 20px; */
    border: 0;
    background: rgba(13, 30, 40, 0.5);
    color: #ccc;
}


/* 新增按钮样式 */

.container .add {
    background: rgb(6, 67, 197);
    border: 0px;
    padding: 5px 15px;
    color: #ccc;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
    /* line-height: 20px; */
}


/* 实现编辑弹窗浮动面板 */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    background: rgba(0, 0, 0, 0.7);
}

.overlay td:first-child {
    width: 66px;
}

.overlay .con {
    position: absolute;
    width: 420px;
    min-height: 300px;
    background: #fff;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    /*margin-top: -150px;*/
    padding: 20px;
}

3.轮到最后的增删改查和弹出框的代码了

Vue.component('model', {
    props: ['list', 'isactive'],
    template: `<div class="overlay" v-show="isactive">
                    <div class="con">
                    <h2 class="title">新增 | 修改</h2>
                    <div class="content">
                    <table>
                        <tr>
                            <td>用户名</td>
                            <td><input type="text" v-model="modifylist.username"></td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td><input type="text" v-model="modifylist.email"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td>
                                <label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
                                <label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
                                <label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
                            </td>
                        </tr>
                        <tr>
                            <td>省份</td>
                            <td>
                                <select name="" id="" v-model="modifylist.province">
                                    <option value="北京市">北京市</option>
                                    <option value="河北省">河北省</option>
                                    <option value="河南省">河南省</option>
                                    <option value="重庆市">重庆市</option>
                                    <option value="广东省">广东省</option>
                                    <option value="辽宁省">辽宁省</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>爱好</td>
                            <td>
                                <label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
                                <label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
                                <label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
                                <label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
                                <label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
                            </td>
                        </tr>
                    </table>
                    <p>
                    <input type="button" @click="changeActive" value="取消">
                    <input type="button" @click="modify" value="保存">
                    </p>
                    </div>
                    </div>
                </div>`,
    computed: {
        modifylist() {
            return this.list;
        }
    },
    methods: {
        changeActive() {
            this.$emit('change');
        },
        modify() {
            this.$emit('modify', this.modifylist);
        }
    }
});
var app = new Vue({
    el: '#app',
    data: {
        isActive: false,
        selected: -1,
        selectedlist: {},
        slist: [],
        searchlist: [],
        list: [{
                username: '刘柳',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            },
            {
                username: '贝贝',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            },
            {
                username: '刘备',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            },
            {
                username: '曹操',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            },
            {
                username: '等等',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            },
            {
                username: '娥娥',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }
        ]
    },
    created() {
        this.setSlist(this.list);
    },
    methods: {
        // 修改数据
        showOverlay(index) {
            this.selected = index;
            this.selectedlist = this.list[index];
            this.changeOverlay();
        },
        // 点击保存按钮
        modify(arr) {
            if (this.selected > -1) {
                Vue.set(this.list, this.selected, arr);
                this.selected = -1;
            } else {
                this.list.push(arr);
            }
            this.setSlist(this.list);
            this.changeOverlay();
        },
        add: function() {
            this.selectedlist = {
                username: '',
                email: '',
                sex: '男',
                province: '北京市',
                hobby: []
            };
            this.isActive = true;
        },
        // delete list in index location
        del(index) {
            this.list.splice(index, 1);
            this.setSlist(this.list);
        },
        changeOverlay() {
            this.selected = -1;
            this.isActive = !this.isActive;
        },
        // 获取需要渲染到页面中的数据
        setSlist(arr) {
            this.slist = JSON.parse(JSON.stringify(arr));
        },
        // 搜索
        search(e) {
            var v = e.target.value,
                self = this;
            self.searchlist = [];
            if (v) {
                var ss = [];
                // 过滤需要的数据
                this.list.forEach(function(item) {
                    if (item.username.indexOf(v) > -1) {
                        if (self.searchlist.indexOf(item.username) == -1) {
                            self.searchlist.push(item.username);
                        }
                        ss.push(item);
                    } else if (item.email.indexOf(v) > -1) {
                        if (self.searchlist.indexOf(item.email) == -1) {
                            self.searchlist.push(item.email);
                        }
                        ss.push(item);
                    }
                });
                this.setSlist(ss); // 将过滤后的数据给了slist
            } else {
                // 没有搜索内容，则展示全部数据
                this.setSlist(this.list);
            }
        }
    },
    watch: {}
})

最终的效果是这样的
在这里插入图片描述
在这里插入图片描述

代码出处：https://github.com/ylscj/vue

代码小菜鸟00
关注
  • 9
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue框架实现对前端数据表的增删改查(第六课)
qq_56248592的博客
11-18 1789
前端对数据的增删改查你看到过吗?今天带你来实现一下在前端就页面上实现对数据的增伤改查
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
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删除和修改数据
最新发布
m0_73570063的博客
08-08 953
我们设计编辑按钮时，使其弹出一个弹出框，在弹出框中进行数据的编辑并保存，是和新增数据相同的思路，在事件@click下，@click="edit(scope.$index,scope.row)"，传入两个参数，一个是下标一个是数据。和删除操作不同的是，添加数据的按钮不能放在每行数据上，新增按钮应该放在表单头部上，每次点击新增按钮都弹出一个弹出框，我们输入数据后点击弹出框中的确认按钮，数据就存入了数据库中，并且新添加的数据会自动刷新出到网页上来。编辑数据是针对某行数据进行更改，只需要将按钮放在每行数据后。
Vue项目通过node连接MySQL数据库并实现增删改查操作
热门推荐
weixin_52580677的博客
03-01 5万+
Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 2.下载安装需要的插件 下载express npm install express 下载cors，用于处理接口跨域问题 npm install cors 下载mysql npm install mysql 下载axios npm install axios 3.在项目中创建server文件夹，用于搭建本地服务器 创建/server/app.js，用于配置服务器相关信息 let expr
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用vue实现增删改查
m0_64344470的博客
05-08 2968
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
vue前端中购物车实现增删改查
08-05
通过以上步骤，我们已经用Vue2实现了购物车的基本功能，包括增、删、改、查。这只是一个基础示例，实际项目中可能需要考虑更多细节，如商品图片、库存检查、价格折扣、商品分类等。Vue2的强大在于它的灵活性和可扩展...
Vs Code Vue实现增删改查
01-07
在Vue组件中调用这些接口以实现数据的增删改查。 9. **状态管理**：如果项目复杂度较高，可以引入Vuex进行状态管理。Vuex允许集中存储和管理应用的状态，并提供了统一的API供组件访问和修改。 10. **路由配置**：...
springboot+vue+bootstrap实现用户增删改查
12-19
在用户交互中，Vue发送axios请求到后端API，获取或更新数据，并在前端界面动态渲染结果。 3. **Bootstrap**: Bootstrap是一个流行的前端CSS框架，提供了一套响应式布局、移动设备优先的Web设计工具。在本项目中，...
Vue实现增删改查
weixin_46066111的博客
01-10 654
1、引入vue.js 本案例使用了bootstrap框架。4、vue实例，定义数组，进行全局查询。3、模态框显示，点击修改之后弹出。2、视图层展示，点击添加。
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
08-28
主要介绍了从vue基础开始创建一个简单的增删改查的实例代码，需要的朋友参考下
vue实现增删改查
jdhdvdjdn的博客
03-27 1328
<!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,td{
vue实现增删改查（内附源代码）
weixin_43939158的博客
11-21 1万+
VUE+Element实现增删改查 目录VUE+Element实现增删改查前言实验步骤总结：源代码 前言 &最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。 因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学一下吧。 实验步骤 首先引入一下element的css以及js <!-- 引入样式 --> <link rel="stylesheet" href="htt
Vue实现增删改查功能
weixin_61443360的博客
06-26 958
它调用`reset`方法来重置表单数据，然后调用名为`getCity`的API接口来获取指定城市的详细信息。- `getList`：此方法用于查询城市列表数据。它调用`resetForm`方法来重置查询表单，然后调用`handleQuery`方法来查询城市列表数据。- `handleQuery`：此方法用于搜索城市列表数据。它将页码重置为1，然后调用`getList`方法来查询城市列表数据。- `cancel`：此方法用于关闭添加或修改城市对话框，并重置表单数据。
vue简单实现增删改查
weixin_62154336的博客
05-19 301
【代码】vue简单实现增删改查。
vue中实现增删改查
iygxv
11-20 1万+
vue中实现增删改查 一个正在努力爱好运动的程序猿座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 文章目录vue中实现增删改查一、增（添加）二、删（删除）三、改（修改）四、查（查找） 一、增（添加） //1.push();从末尾开始添加 //2.unshift();//从第一位开始添加元素 二、删（删除） //1.splice（删除的索引，删除的个数）； 例如splice（1,1）； //2.filter方法 arr.filter((v，i)=>{return i!=index}
简单的vue增删改查
jlb240的博客
04-20 775
【代码】简单的vue增删改查。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值