vue table 循环增加表单

最新推荐文章于 2024-01-14 19:29:21 发布

原创最新推荐文章于 2024-01-14 19:29:21 发布 · 829 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍如何在Vue.js应用中利用v-for指令动态地在表格中添加和删除表单字段，实现数据的增删操作，结合javascript进行交互处理。

  <table>
            <tr v-for="(items, index) in items" :key="index">
                <td>
                    <input label="名称" placeholder="输入名称" />
                </td>
                <td>
                    <input  label="规格" placeholder="输入规格" />
                </td>
                <td>
                    <input  label="数量" placeholder="输入数量" />
                </td>
                <td>
                    <input  label="价格" placeholder="输入价格" />
                </td>
                <td>
                    <button v-if="index == this.items.length-1" @click="addRow">
                        增加
                    </button>
                    <button v-else @click="delRow(index)">
                        删除
                    </button>
                </td>
            </tr>
        </table>

<script>

export default {
    data() {
        return {
           
            items: [
                {},
                {},
              
            ]
        }
    },
    created() { },
    methods: {
        addRow() {
            this.items.push({})
            
        },
        delRow(index) {
            this.items.splice(index, 1)
        }

    }
};
</script>