vue3 element-plus 树组件 el-tree 展开到默认层级递归、双击树重命名

一、展开到默认层级

1. 需求：树节点默认展开到第二层
2. 解决方案：配置属性 default-expanded-keys、node-key，写一个递归函数返回 二级层级树节点的 id 数组
   
3. 源码实现：

//dom
  <el-tree
    :data="treeData "
    node-key="id"
    :default-expanded-keys="groupId"
  />
  
// js
 // 定义变量groupId ，computed 为树数据改变及时对应改变
  const groupId = computed(()=>{
  // 定义一个空数组用于存储符合条件的 ID
  const groupArrId = []
 // 定义一个递归函数用于遍历数据并添加符合条件的 ID
  const addId = (item) => {
    if (item.type === 'second') {
      groupArrId.push(item.id)
    }
 // 如果当前元素有子元素 递归调用 addId 函数处理子元素
    if (item.children && item.children.length > 0) {
      item.children.forEach(addId);
    }
  };
 // treeData 即为当前树结构的总数据
  if (treeData && treeData.value) {
    treeData.value.forEach(addId);
  }
  // 返回包含符合条件的 ID 的数组
  return groupArrId
})

二 、树节点双击重命名

解决方案：

• 定义两个dom：
  1. span 用于展示
  2. input 用于输入
• 定义两个变量：
  1. isEdit ，当双击事件触发，将当前节点id赋值给isEdit，如果当前节点等于isEdit显示input,否则显示span
  2. groupNameInput：input v-model绑定值
• 定义两个方法：
  1. editSave: input 失焦时触发，调用后台接口
  2. editCateName：span 双击时触发，将当前节点名赋值给groupNameInput

源码实现：

// dom
  <el-tree :data="treeData " node-key="id" :default-expanded-keys="groupId">
      <template #default="{ data }">
        <div>
            <el-input
              v-if="isEdit === data.id"
              v-model.trim="groupNameInput"
              placeholder="请输入"
              @blur="$event => editSave($event, data)"
              // 键盘回车时同失焦方法
              @keyup.enter="$event.target.blur()"
              > 
            </el-input>
            <span v-else @dblclick.stop="editCateName(data)">
              {{data.name}}
            </span>
          </div>
      </template>
    </el-tree>
    
// js
const groupNameInput = ref('')
const isEdit = ref(1) //随便定义一个初始值 不要和data.id重复

// 双击重命名
function editCateName(data) {
// 将当前节点名赋值给groupNameInput
  groupNameInput.value = data.name;
// 将当前节点id赋值给isEdit
  isEdit.value = data.id;
}

// 失去焦点   
function editSave(val, data) {
// 置为初始值
  isEdit.value = 1;
  if (!groupNameInput.value) {
    ElMessage.warning('材料名称不可为空');
    return false;
  }
  ...调用后台重命名接口
}