十澈 2021-11-04 19:25 采纳率: 100%
浏览 129
已结题

vue怎么做表格新增一行

请问点击按钮新建一行,里面的数据自己输入,怎么做(vue)
急,求解答,初学不懂怎么搞

img

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2021-11-04 20:41
    关注

    大概写了个示例

    img

    
    <div id="app" style="width:800px;margin:0 auto;text-align:center">
        <input type="button" value="新建" v-on:click="addItem"/><br /><br />
        <table border="1" width="100%">
            <tr><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td><td>删除</td></tr>
            <tr v-for="(item,index) in list">
                <td><input type="text" v-model="item.name" /></td>
                <td><input type="text" v-model="item.age" /></td>
                <td><input type="text" v-model="item.sex" /></td>
                <td><input type="text" v-model="item.no" /></td>
                <td><a v-on:click="del(index)">删除</a></td>
            </tr>
        </table>
        list数据:{{list}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue=new Vue({
            el: '#app',
            data: { list: [] },
            methods: {
                addItem() {
                    this.list.push({})
                },
                del(index) {
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
    

    有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 11月16日
  • 已采纳回答 11月8日
  • 修改了问题 11月4日
  • 创建了问题 11月4日