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() 方法

1、新建html文档，在head标签中引入vue的js文件。

2、在body标签中添加一个id为“app”的div标签。

3、在这个div标签中再添加一个div标签，在vue中添加一个变量数据。

4、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素。

Vueel-tree可以使用自定义渲染来实现每个节点后面添加输入框并保存的功能，具体步骤如下：

1. 在Vueel-tree组件中添加render属性，用于渲染树节点：

<el-tree :data="data" :render-content="renderContent"></el-tree>

2. 在methods中定义renderContent函数，用于渲染树节点：

methods: { renderContent(h, { node, data }) { return h('span', [ h('span', node.label), h('el-input', { props: { value: data.inputValue }, on: { input: val =>{ data.inputValue = val } } }) ]) } }

3. 在data中定义inputValue，用于保存输入框的值：

data() { return { data: [], inputValue: '' } }

4. 在Vueel-tree组件中添加node-key属性，用于设置节点的key值：

<el-tree :data="data" :render-content="renderContent" node-key="id"></el-tree>

5. 在data中定义id，用于设置节点的key值：

data() { return { data: [ { id: 1, label: 'node1' }, { id: 2, label: 'node2' } ], inputValue: '' } }

这样，就可以在Vueel-tree组件中实现每个节点后面添加输入框并保存的功能了。

---