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

关注

原创最新推荐文章于 2026-09-05 03:16:19 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

VUE项目之table表格动态添加一列数据，新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）一、问题用elementUi横着增加一行数据没毛病，可以操作添加一列，这新增的这一列，第一次去赋值的时候值是改了，但没生效点击下一行时值就变过来二、原因横向添加是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加的数据，因为没有事先在 el-select v-modle="" 里面定义好字段，定义好的option是通过v-for... 阅读详情

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

简单想个办法实现如下：

<!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>