Vue 点击添加一行和删除一行

我用的是：vue + element ui 直接代码。

逻辑

注释：

1.通过对数组的 *** 作，进行添加和删除；

2.这里应注意index这个索引，用于删除时，知道删的是哪一个值；

3.删完对应的值，要对数组的index这个索引重组，否则再删除时会出错；

此篇幅比较长，涉及到的小知识点也比较多，一定要耐心看完，记住学东西没有耐心可不行！！！

一、添加和修改

注：添加和编辑用到了同一个组件，也就是此篇文章你能学会如何封装组件及引用组件；第二能学会async和await；第三父向子传递数据props和子向父传递数据$emit()；

1.添加数据

（1）请求地址：/article/category利用post传递数据

（2）编写api：注意add的url地址用的 反单引号，可以在url后面进行组合数据，这个知识点在编辑和删除你会看到详细的解释。

（3）编写方法

首先新建一个组件，里面的代码同样是从elementUI中复制过来的表单，下面会根据详细步骤解析elementUI标签中属性的意思。

在category/index.vue中进行引用，注意组件要首字母大写，不是必须的，但是最好规范一些。

引用完毕之后进行修改edit.vue组件：解析：:title动态绑定的title名称；:visible.sync布尔类型，控制模态框的显示与否；:before-close是一个方法，关闭模态框；:rules表单验证；ref=相当于id=；:model表单的数据；prop=关闭模态框时清除数据要用到，这个在elementUI中有解释，自己去看文档；v-model绑定的具体数值；:label绑定的数据，要做默认选中效果；@click执行的方法

由于是父组件向子组件传递数据，所以在子组件中要用props进行接收，然后在上面进行动态绑定；注意：所有接受的变量要定义type和default，声明类型和默认值；此处小知识点，子组件向父组件传递值用$emit()

表单验证：在子组件中返回rules，也就是开头:rules="rules"；注意：这里的rules是个object，里面需要验证的字段是个array，数组中每个value都是object，详细的验证方法在elementUI中有体现，自己去看。

此处定义的handleClose、onSubmit、submit方法；注意：在submit中有编辑和添加方法，用的同一个，所以有if判断；this.$refs['form'].resetFields()相当于jquey中$('#form').resetFields()清空数据；async、await和promise区别，自己去百度，这里只说明async和await是es6新语法，相当于api.add(this.formData).then((res) =>{//TODO})；这里可能有同学会有疑问，this.closeForm()这个方法在哪？他是父组件传递过来的Funciton，在下文中会解释到。

开始 *** 作父组件index.vue，在data中返回edit对象，然后把里面的值绑定到 组件标签中；解析：title就是title；visible是否显示模态框；formData传递过去的数据，由于是添加功能，所以formData是空的，编辑就需要传递了；closeForm传递一个方法，用来关闭模态框

到这里，添加功能就已经实现了，仔细去看我上面的截图，一定要注意我说的点，如果你比着写发现不对，一定要仔细对比。当对比不出来的时候，留言告诉我。

2.修改数据

（1）请求地址：/article/category/{id} 查询数据用get，这里的请求类型用的是restful请求方式，restful包含：get、post、put、patch、delete；/article/category 修改数据用put

（2）编写api：由于修改需要先查到数据，然后再进行传递和渲染，所以在api中有一个查询数据方法，也就是getById()

（3）编写方法

在index.vue父组件中编辑方法为handleEdit()，同样这里用到了async和await，然后先请求到了当前id返回的值，然后传递到edit.vue子组件中。

这里的if判断，判断传递过来的formData的id值是否为空，有值说明是编辑，无值说明是添加。if判断就在这里进行的体现价值，因为我们添加和编辑用的同一个组件，所以if显得至关重要。

仔细去看代码，去理解我的思路，为什么某些地方是这样写而不是那样写，一定要注意。哪里有看不明白的一定要留言进行讨论，我看到会第一时间回复。最终的效果：

二、删除

（1）请求地址：/article/category/{id} 删除用的是delete请求类型

（2）编写api：再强调一遍，url用的反单引号

（3）编写方法：因为删除用不到子组件了，所以删除都在index.vue中进行的

这里用到了elementUI中的$confirm方法，去文档中复制使用即可，方法的话就不再详细解释了，前面几篇文章已经解释过了。api.delete(id).then((res) =>{//TODO})

最终效果：点击删除，显示提示，传递id进行删除。

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动

<h1>{{obj.name}}</h1>

<h2>{{obj.prop}}</h2>

<script src="../Scripts/vue.js"></script>

<script>

$(function () {

alert(1)

})

var vue = new Vue({

el: 'body',

data: {

//初始obj是空的，因此视图默认是什么都没有

obj:{}

},

ready: function () {

//这里是vue初始化完成后执行的函数

this.obj.name = "对象名字"//这时会显示name

},

methods: {

//这里是自定义的方法

setProp: function () {

this.obj.prop = "测试"//这时会显示测试

}

}

})

---