Vue3 使用element plus的Tree树型控件嵌套input输入框

在Vue 3中使用Element Plus的Tree组件嵌套Input组件，可以通过自定义Tree节点的内容来实现。以下是一个简单的示例：

首先，确保你已经安装了Element Plus：

npm install element-plus

然后，在你的Vue组件中：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :filter-node-method="filterNode"
  >
    <template #default="{ node, data }">
      <span>
        <el-input
          v-if="node.isEdit"
          v-model="node.label"
          size="small"
          @blur="handleInputBlur(node, data)"
          @keyup.enter="handleInputEnter(node, data)"
        />
        <span v-else style="margin-left: 5px;">{{ node.label }}</span>
        <el-button
          type="text"
          size="mini"
          @click="handleEdit(node, data)"
        >
          编辑
        </el-button>
      </span>
    </template>
  </el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeData = ref([
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 4,
        label: '二级 1-1',
      },
    ],
  },
  // ... 更多树节点数据
]);
 
const defaultProps = {
  children: 'children',
  label: 'label',
};
 
const handleEdit = (node, data) => {
  console.log('Edit', node, data);
  node.isEdit = true; // 标记节点为编辑状态
};
 
const handleInputBlur = (node, data) => {
  console.log('Input Blur', node, data);
  node.isEdit = false; // 输入框失去焦点时取消编辑状态
};
 
const handleInputEnter = (node, data) => {
  console.log('Input Enter', node, data);
  // 处理回车键，可以包括保存操作等
};
 
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
</script>

在这个示例中，我们定义了一个带有编辑按钮的树形控件，点击编辑按钮会将节点的文本显示为el-input组件，以便用户可以直接编辑节点名称。输入框失去焦点或者按下回车键后，节点会退出编辑状态。同时，提供了一个简单的filterNode方法用于实现树的搜索过滤功能。