VUE3+TS+Element UI生成树节点可以进行增删查鼠标移动显示

做个简单的笔记备忘

效果图

代码：

<template>
  <div class="custom-tree-node">
    <el-tree
      :data="organize"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="clickNode"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <!-- 编辑状态 -->
          <div v-if="node.isEdit">
            <el-input
              v-model="data.name"
              autofocus
              size="mini"
              class="inpuText"
              ref="refInput"
              @blur.stop="handleInput(node, data)"
              @keyup.enter="handleInput(node, data)"
            ></el-input>
          </div>

          <!-- 非编辑状态 -->
          <div v-else>
            <!-- 名称： 新增节点增加class（is-new） -->
            <span>
              {{ node.label }}
            </span>
          </div>
          <!-- <span>{{ node.label }}</span> -->
          <span class="showIcon">
            <a style="margin-left: 18px" @click="append(data)"
              ><i class="iconfont !text-12 cw-add"></i>
            </a>
            <a style="margin-left: 8px" @click="handleEdit(node, data)">
              <i class="iconfont !text-12 cw-edit"></i>
            </a>
            <a style="margin-left: 8px" @click="remove(node, data)">
              <i class="iconfont !text-12 cw-delete"></i>
            </a>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import type Node from "element-plus/es/components/tree/src/model/node"
import { ref, nextTick } from "vue"
import useSearch from "../use/useSearch"
import {
  organize,
  treeNodeId,
  treeNodeName,
  treeNodenewName,
  treeNodeParentId,
} from "../use/CWData"
import { ElMessage } from "element-plus"
import {
  userNorg,
  orgUser,
  addParentOrgan,
  addOrgan,
  updateOrgan,
  delOrgan,
} from "../use/orgUser"
//---------------
const { search } = useSearch()
search()
userNorg()

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

//添加子节点
const append = (data: Tree) => {
  treeNodenewName.value = "新建组织"
  treeNodeParentId.value = data.id
  addOrgan()
}
//删除节点
const remove = (node: Node, data: Tree) => {
  treeNodeId.value = data.id
  delOrgan()
}

const clickNode = (data: any, node: Node, TreeNode: any, event: any) => {
  treeNodeId.value = data.id
  treeNodeName.value = data.label
  treeNodeParentId.value = node.parent.data.id
  orgUser()
}
// 编辑节点
const handleInput = (node: any, data: any) => {
  treeNodeId.value = data.id
  treeNodenewName.value = data.name
  treeNodeParentId.value = node.parent.data.id
  if (data.name == "" || data.name == undefined || data.name == data.label) {
    console.log(data.label, data.name, `打印`)
    ElMessage("请输入新名称")
  } else {
    updateOrgan()
    ElMessage({
      message: "修改成功！",
      type: "success",
    })
  }
  // 退出编辑状态
  if (node.isEdit) {
    node.isEdit = false
  }
}

// 点击修改
const refInput = ref()  //用来控制input框的自动聚焦
const handleEdit = (node: any, data: any) => {
  console.log(node, data, "nodehedata")
  // 设置编辑状态
  if (!node.isEdit) {
    node.isEdit = true
  }
  //自动获取input焦点
  nextTick(() => {
    console.log(refInput, "进入")
    refInput.value.focus()
  })
}
</script>
<style lang="scss" scoped>
// 最新树
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
//通过css控制树结构操作按钮的显示隐藏
.showIcon {
  display: none;
}

::v-deep .el-tree--highlight-current {
  width: 100% !important;
}
::v-deep .el-tree-node__content {
  &:hover {
    background-color: #f5f7fa;
    .showIcon {
      display: block;
    }
  }
}

// 编辑框的样式

::v-deep .el-input__wrapper {
  padding: 0;
  height: 26px;
  background: #ecf5ff;
  box-shadow: none;
}
::v-deep .el-input__wrapper:hover {
  box-shadow: none;
}
::v-deep .el-input__wrapper.is-focus {
  box-shadow: none;
}
</style>