vue新增节点的方法？

接下来我们主要讨论在什么情况下新增节点。之所以讨论什么情况下需要新增节点，本质上是为了使用JavaScript的计算成本来换取DOM的 *** 作成本。如果一个节点已经存在于DOM中,那就不需要重新创建一个同样的节点去替换已经存在的节点。事实上，只有那些因为状态的改变而新增的节点在DOM中并不存在时，我们才需要创建一个节点并插入到 DOM中。首先，新增节点的一个很明显的场景就是，当oldVnode不存在而 vnode存在时，就需要使用vnode生成真实的DOM元素并将其插入到视图当中去。这通常会发生在首次渲染中。因为首次渲染时，DOM中不存在任何节点，所以 oldVnode是不存在的。

<div v-for="(item, index) in divList">

    <el-select v-model="item.rewardType" class="cell_width" @change="((val)=>{changeRewardType(val,index)})">

      <el-option

        v-for="itemOpt in rewardTypeList"

        :key="itemOpt.value"

        :label="itemOpt.label"

        :value="itemOpt.value"

      ></el-option>

    </el-select>

<div v-if="index!=divList.length-1" style="line-height: 114pxfont-size:32pxcursor: pointer" @click="removeSetter(index)">-</div>

            <div v-else style="line-height: 114pxfont-size:32pxcursor: pointer" @click="addSetter">＋</div>

</div>

data(){

return{divList:[{rewardType:''}]}

}

            addSetter(){

                this.divList.push({rewardType:''})

            },

            removeSetter(i){

                this.divList.splice(i,1)

            }

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

---