VUE饿了么树形控件添加增删改功能的示例代码

下面我将为您详细讲解如何实现VUE饿了么树形控件添加增删改功能的示例代码，这个过程包含两条示例说明。

示例1：如何添加节点

首先，我们需要在vue组件中导入饿了么UI库的el-tree组件，同时引入element-ui的css文件：

<template>
  <el-tree :data="data"></el-tree>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css'
  import { ElTree } from 'element-ui'

  export default {
    components: { ElTree },
    data() {
      return {
        data: [] // 树形数据
      }
    }
  }
</script>

此时页面仅展示了一个空的树形结构，接下来我们需要在页面上添加一个按钮，并为其绑定添加节点的方法：

<template>
  <el-tree :data="data"></el-tree>
  <button @click="addNode">添加节点</button>
</template>

<script>
  // 省略import和data定义

  export default {
    components: { ElTree },
    methods: {
      addNode() {
        // 添加节点的逻辑
      }
    }
  }
</script>

接下来我们需要在addNode()方法中实现添加节点的逻辑，首先我们需要找到树形控件的$children属性，该属性代表当前所有节点，我们可以在该属性下添加一个新节点对象，示例代码如下：

addNode() {
  const newnode = { id: ++this.maxid, label: '新增节点', children: [] }
  this.$refs.tree.$children.push(newnode)
}

在上述示例代码中，我们定义了一个newnode变量，该变量代表要添加的新节点对象，其中id表示节点的唯一标识，label表示节点的文本，children表示子节点列表。接着，我们使用this.maxid属性来获取当前树形控件节点的最大id值，然后将其加1，作为新节点的id。最后，将新节点添加到树形控件的$children属性中，即可完成添加节点的操作。

示例2：如何修改节点

接下来，我们将介绍如何修改树形控件中的节点。首先，我们需要实现修改节点的编辑功能，我们可以显示每个节点的右侧操作按钮，如果用户点击了编辑按钮，可以在节点上方显示一个文本框，用户可以在文本框中修改节点的文本内容。

在vue组件中，我们可以为每个节点对象添加一个_edit属性，用于表示当前节点是否处于编辑状态，同时我们为每个节点渲染一个操作按钮，并判断当前节点是否处于编辑状态，根据不同情况渲染不同的操作按钮，示例代码如下：

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

<script>
  export default {
    components: { ElTree },
    data() {
      return {
        data: [] // 树形数据
      }
    },
    methods: {
      renderContent(h, { node, data, store }) {
        const editBtn = h('span', {
          class: 'el-tree-node__edit-btn el-icon-edit',
          on: {
            click: () => {
              this.handleEdit(data)
            }
          }
        })

        const content = h('span', {
          class: 'el-tree-node__label'
        }, [data.label])

        const nodeArr = [content]
        if (data._edit) {
          nodeArr.push(h('input', {
            attrs: {
              type: 'text',
              value: data.label
            },
            on: {
              blur: () => { this.handleEdit(data, false) },
              input: (e) => { data.label = e.target.value }
            }
          }))
        }

        const actions = h('span', {
          class: 'el-tree-node__actions'
        }, [editBtn])

        return h('span', {
          class: 'el-tree-node__content'
        }, [...nodeArr, actions])
      },
      handleEdit(data, isedit = true) {
        data._edit = isedit
      }
    }
  }
</script>

在上述示例代码中，我们使用了renderContent属性来自定义树形节点的渲染，我们在该方法中根据节点是否处于编辑状态来渲染不同的操作按钮。同时我们为每个节点对象添加一个_edit属性，用于记录节点是否处于编辑状态。编辑节点的逻辑如下：

handleEdit(data, isedit = true) {
  data._edit = isedit
}

在每次点击编辑按钮时，我们将当前节点的_edit属性赋值为true，然后重新渲染节点内容即可。

接下来让我们实现修改节点的功能，当用户在文本框中修改了节点文本后，我们需要将修改后的文本保存到节点对象中。示例代码如下：

handleEdit(data, isedit = true) {
  data._edit = isedit
  if (!isedit) {
    this.$set(this.data, data.index, data)
  }
}

在上述代码中，我们使用this.$set方法将修改后的节点数据重新设置到树形控件的数据data中即可。最后一个问题是如何获取当前节点的索引index？我们可以在渲染节点时为每个节点对象添加一个index属性，记录当前节点在数组中的索引位置，示例代码如下：

renderContent(h, { node, data, store }) {
  data.index = store.currentIndex
  // 省略其它代码
}

在上述示例代码中，我们使用store.currentIndex属性来获取当前节点在数组中的索引位置，然后将其赋值给data.index属性即可。

至此，我们已经完成了在VUE饿了么树形控件上添加和修改节点的功能。