Vue中动态增加表单项的方法

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div>中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div>之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template>标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

接上，

路由加载的组件，有两种情况，一个是会重新执行，一个是不会重新执行。

这个嘛，要看路由的编写情况，还要看路由的跳转情况。

tab标签切换的时候，一般会期待可以保存状态，这又分为两种情况，一个是我自己写的列表组件要如何保持状态，一个是正常的组件的保持状态。

先说自己的，由于列表组件的路由都是一个，通过 moduleID 的参数的变化来区分不同的模块。

这样本身就是保存状态，但是由于 moduleID 会变化，又需要重置，也就是说不能保持状态。

好像有点乱。

所以我做了一个 list-shell 组件。

路由先加载 这个 shell 组件，然后在shell里面判断有多少个动态的tab，然后加载对应的list组件。

shell组件是可以保持状态的，每个模块对应一个list组件，这样既可以区分，又可以加载不同的模块。

这样自己的事情就搞定了。

然后就是正常的组件，这个听说 keep-alive 可以自动保持状态，但是试了一下，似乎不好用。还在研究。

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

为每个页面设置不重复的name字段，当点击菜单栏的时候，将点击的组件的name值存入catch_components中，当点击关闭标签时，删除该项。

无需设置页面的name字段，当点击菜单栏的时候，将点击的组件的路径值存入catch_components中，当关闭按钮时候，删除该路径，并找到当前已缓存的cache和keys，暴力删除该缓存页面。

如何拿到当前已缓存的cache和keys

---