vueel-tree怎样给每个节点后面添加输入框并保存

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

官方文档合并列/行有一个关键属性 rowSpan和colSpan

如图：

render 中有一个默认renderCOntent函数，包含三个参数  value，row，index  一般我们想合并几行列 通过判定index==？来设置 colSpan /rowSpan的值为0  就能成功合并（renderCOntent函数是默认格式，不建议大改）

情景：

后端给了一个多维数组，首先要做的是遍历数组，push到新数组里。原因是方便 antd表格数据渲染

拿到新数组后，开始合并表格列

特别提醒：新数组中的参数名要和表格中的dataIndex 一致！

做到这一步数据基本能渲染出来，如果还想对数据进行填写累加 *** 作，那么需要植入Input组件  使用onBlur函数方法

特别提醒：4.0版本onBlur 时不再修改选中值，且返回 React 原生的 event 对象  我用的是3.16版本！

通过传入的values（row是形参）  进行判定，不为undefined时则转化为Number类型（input的值都是string，转化后方便计算value值和fraction值）

slice() 方法可从已有的数组中返回选定的元素。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

注意:  reduce() 对于空数组是不会执行回调函数的。

最后获取的newData就是得到的累加总值。  

---