vue在表格添加一行或者删除选择的行数

最新推荐文章于 2023-10-17 11:07:38 发布

花开一度

最新推荐文章于 2023-10-17 11:07:38 发布

阅读量2.6k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/qq_41294224/article/details/102672688

版权

在这里插入图片描述

html

<!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="bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <div id="model">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>单价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) of book">
                    <td>{{i+1}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.author}}</td>
                    <td>{{v.price}}</td>
                    <td><button type="button" name="" id="" v-on:click="del(i)" class="btn btn-primary">删除</button></td>
                </tr>
                <!-- <tr>
                    </td>
                    <td><button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block">删除</button></td>
                </tr> -->
            </tbody>
        </table>
        <form action="">
            <label>添加书籍</label>
            <div class="form-group col-md-3">
                <label for="">书名：</label>
                <input type="text" v-model="newBook.name" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId"  v-bind:style="mystyle" class="">{{error1}}</small>
            </div>
            <div class="form-group col-md-3">
                <label for="">作者：</label>
                <input type="text"  v-model="newBook.author" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId2" v-bind:style="mystyle" class="">{{error2}}</small>
            </div>
            <div class="form-group col-md-3">
                <label for="">价格：</label>
                <input type="text" v-model="newBook.price" class="form-control" name="" id="" 
                    placeholder="">
                <small id="helpId3" v-bind:style="mystyle" class="">{{error3}}</small>
            </div>
            <button type="button" v-on:click="addBook" name="" id="" class="btn btn-primary ">添加</button>
    </div>
    </form>

</body>
<script src="vue.min.js"></script>
</html>

 let vm = new Vue({
        el: '#model',
        data: {
            error1:'',
            error2: '',
            error3: '',
            mystyle:{
                color: 'red',
            },
            id: 3,
            newBook: {
                id:'',
                name: '',
                author: '',
                price: '',
            },
            book: [
                {
                    id: "1",
                    name: "红楼梦",
                    author: "曹雪芹",
                    price: "32"
                },
                {
                    id: "2",
                    name: "水浒传",
                    author: "施耐庵",
                    price: "30"
                },
                {
                    id: "3",
                    name: "三国演义",
                    author: "罗贯中",
                    price: "24"
                },
            ]


        },

        methods: {
        //添加一行
            addBook: function () {
                if(this.newBook.name==""){
                    this.error1="书名不能为空!"
                    return;
                }else{
                     this.error1 = ""
                }
                if(this.newBook.author == ""){
                    this.error2 = "作者不能为空！"
                      return;
                }else{
                   this.error2 = ""
                }
                if (this.newBook.price == "") {
                    this.error3 = "价格不能为空！"
                     return;
                }else{
                    this.error3 = ""
                    
                }
                // this.id += 1;
                // this.newBook.id= this.id;
                this.book.push(this.newBook);
                this.newBook = {
                    id: '',
                    name: '',
                    author: '',
                    price: '',
                };
                this.error1='';
                this.error2 = '';
                this.error3 = '';
            },
            //删除
            del:function(i){
                this.book.splice(i,1);
            }
        },
    })

注意删除一行后序号也会发生改变

花开一度

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue在表格添加一行或者删除选择的行数

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫