vue表单中动态添加输入框的方法

vue表单中动态添加输入框的方法2019-12-20

1.数据格式

2.要动态添加的部分循环

3.点击添加时向数组中添加新对象

4.删除

效果

为了实现这一需求，啊啊啊啊啊~简直要疯了；设计数据类型，读取数据，添加数据....一系列问题。记录开发不易啊，各种细节处理，调试。

1.点击选中复选框，下面出现复选框选中项

2.不选中复选框时，不出现

3.同时输入框也是可以动态添加的

4.也可以指定项删除

具体实现效果图如下:

1.搭建Vue环境

2.引入elementUI依赖，这里是全局引入的

3.路由router，本项目引入了，看个人需要引入

行为方法：

数据格式：

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组件中实现每个节点后面添加输入框并保存的功能了。

---