vue 实现表格单元格行列动态添加

最新推荐文章于 2024-05-10 21:12:15 发布

「已注销」

最新推荐文章于 2024-05-10 21:12:15 发布

阅读量4.1k

点赞数 2

分类专栏： web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Crazy_Java1234/article/details/127579929

版权

web前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一个网友开发中遇到一个动态添加单元格，行的需求，不是那种很简单的添加行列，新增一个输入框相当于新增了一行，如图：
在这里插入图片描述

简单想个办法实现如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        table {
            width: 600px !important;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="table table-bordered">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>爱好</th>
            </tr>
            <template v-for="item,i in list">
                <tr v-for="item2,j in item.length">
                    <td :rowspan="item.length+1" v-if="j==0">{{item.id}}</td>
                    <td :rowspan="item.length+1" v-if="j==0">{{item.name}}</td>
                    <td v-html="item.likes[j]"></td>
                    <td v-if="j==item.length"></td>
                </tr>
                <tr>
                    <td><button @click="add1(i)" type="button" class="btn btn-primary btn-xs">+</button></td>
                </tr>
            </template>
            <tr>
                <td><button @click="add2" type="button" class="btn btn-primary btn-xs">+</button></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1, name: "tom", likes: ["篮球", "足球"], length: 2
                    },
                    { id: 2, name: "jack", likes: ["篮球", "足球", "乒乓球"], length: 3 }
                ]
            },
            methods: {
                add1(i) {
                    this.list[i].likes.push("测试");
                    this.list[i].length += 1;
                    console.log(this.list[i]);
                },
                add2() {
                    this.list.push({ id: "n", name: "张三", likes: ["唱", "跳"], length: 2 })
                }
            }
        })
    </script>
</body>

</html>