Vue小白之新增、删除、修改（弹窗修改）表格数据

本文转载自查看原文 2020-02-10 18:22 2775 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .center {
            height: 500px;
            width: 500px;
            position: absolute;
            top: 200px;
            left: 0;
            right: 0;
            margin: auto;
        }
        .goods-list {
            text-align: center;
        }
        #goodsModel,#editGoods{
            position: relative;
            padding-top: 20px;
            left: 45%;
            top: 200px;
            height: 180px;
            width: 300px;
            background-color: #cccccc;
            text-align: center;
            border-radius: 5px;
            z-index: 100;
        }
    </style>
</head>
<body>
<div id="top">
    <!--新增商品-->
    <div v-show="is_show" id="goodsModel">
        <p>商品名称:<input type="text" v-model="goods_list.name" placeholder="name"></p>
        <p>商品价格:<input type="text" v-model="goods_list.price" placeholder="price"></p>
        <p>
            <button @click="add">保存</button>
            <button @click="cancel">取消</button>
        </p>
    </div>
    <!--编辑商品信息-->
    <div v-show="is_edit" id="editGoods">
        <p v-show="is_display">商品编号:<input type="text" v-model="goods_list.id"></p>
        <p>商品名称:<input type="text" v-model="goods_list.name"></p>
        <p>商品价格:<input type="text" v-model="goods_list.price"></p>
        <p v-show="is_display">商品下标:<input type="text" v-model="goods_list.index"></p>
        <p>
            <button @click="add_edit">保存</button>
            <button @click="cancel2">取消</button>
        </p>
    </div>
    <!--商品列表-->
    <div class="center">
        <button class="myModel" @click="show">添加商品</button>
        <table border="1px" width="500px" id="good">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
                <th>Edit</th>
            </tr>
            <tr v-for="(goods,index) in goods_list" class="goods-list">
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.price}}</td>
                <td>
                    <button @click="edit(goods,$event,index)">编辑</button>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    var good = new Vue({
        el: "#top",
        data(){
            return{
                is_show: false,
                is_edit: false,
                is_display:false,
                goods_list: [
                    {id: 1, name: "python入门", price: 2011},
                    {id: 2, name: "python初级", price: 2012},
                    {id: 3, name: "python中级", price: 2013},
                    {id: 4, name: "python高级", price: 2014},
                    {id: 5, name: "python进阶", price: 2015},
                    {id: 6, name: "python精通", price: 2016},
                ]
            }
        },
        methods: {
            show() {
                this.is_show = true;
            },
            cancel() {
                this.is_show = false;
            },
            cancel2() {
                this.is_edit = false;
            },
            del(index) {
                this.goods_list.splice(index, 1);
            },
            add() {
                var goods = {
                    id: this.goods_list.length+1,
                    name: this.goods_list.name,
                    price: this.goods_list.price,
                };
                this.goods_list.push(goods);
                this.is_show = false;
            },
            edit(goods,event,index){
                this.is_edit = true;
                this.goods_list.id = goods.id;
                this.goods_list.name = goods.name;
                this.goods_list.price = goods.price;
                this.goods_list.index = index;
            },
            add_edit(){
                var dt = {
                    id: this.goods_list.id,
                    name: this.goods_list.name,
                    price: this.goods_list.price,
                };
                this.$set(this.goods_list,this.goods_list.index,dt);
                this.is_edit = false;
            }
        }
    })
</script>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue element 表格增加删除修改数据 vue判断是新增还是修改动态quartz新增、修改、删除 js添加、修改、删除表格中数据、修改时在表格中直接修改基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(三) oracle 数据库更新新增修改删除 Java实现对ES数据的新增，删除，修改，及合并 vue element 弹窗新增修改同一个Dialog展示 mysql数据库新增、修改、删除字段和修改表名数组新增，修改json数据