Vue+ElementUi 基于Tree实现动态节点添加，节点自定义为输入框列

在Vue中结合Element UI实现Tree组件动态添加节点并且节点是输入框的功能，可以通过以下步骤实现：

1. 使用el-tree组件展示树结构。
2. 利用el-tree的自定义节点功能，通过render-content属性来渲染输入框。
3. 监听输入框的输入事件，并在需要时动态添加新节点。

以下是一个简单的示例代码：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    :render-content="renderContent"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return h('span', { style: 'flex: 1; display: inline-block;' }, [
        h('el-input', {
          props: { value: data.label },
          on: {
            input: (val) => {
              this.updateNode(data, val);
            }
          }
        })
      ]);
    },
    updateNode(data, val) {
      if (val) {
        const newNode = { id: this.getNextId(), label: val, children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newNode);
      }
    },
    getNextId() {
      const maxId = Math.max(...this.treeData.map(node => [node.id, ...(node.children || []).map(child => child.id)]));
      return maxId === -Infinity ? 1 : maxId + 1;
    }
  }
};
</script>

在这个示例中，每个节点都是通过el-input组件来实现输入的。当在输入框中输入文本并按下回车时，如果输入的文本不为空，则会创建一个新节点并添加到当前节点的子节点数组中。

请注意，这个示例中的getNextId函数用于生成新节点的唯一ID，它需要根据实际的数据结构来实现。