el-tree--setup语法糖-实现双击树的节点修改、删除节

小鱼儿心语： 时间，抓起了就是黄金，虚度了就是流水;书，看了就是知识，没看就是废纸;理想，努力了才叫梦想，放弃了那只是妄想。努力，虽然未必会收获，但放弃，就一定一无所获。再好的机会，也要靠人把握，而努力至关重要。放手去做、执着坚持!

样式展示：
没双击之前的样式：

双击之后的样式：

• 在没双击之前，树的节点是文本样式。
• 在双击之后，节点位置变成输入框形式，原节点的名称显示在输入框中，可以进行删除或者修改。
• 修改完毕之后，当输入框失去焦点的时候，输入框消失，又变成原本的文本样式，并且显示的是修改后的节点名称。

template：
            <div class="head-container down-tree">
               <el-tree
                  :data="deptOptions"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="deptTreeRef"
                  node-key="id"
                  highlight-current
                  :default-expand-all="false"
                  @node-click="handleNodeClick"
               >
               <template #default="{ node, data }">
               <span
                  :class="{'custom-tree-node': true, 'node-click': flag == data.id}"
                  :ref="node.data.id"
                >
                  <span class="enumText" @dblclick.stop="editCateName(data, node)">{{ data.label }}</span> 
                  <el-input
                    @blur.stop="$event => editSave($event, data)"
                    maxlength="15"
                    show-word-limit
                    placeholder="请输入"
                    v-if="isEdit == data.id" 
                    :ref="data.id"
                    v-model.trim="cateNameInput"
                    style="position: absolute; left: 0px;"
                  >
                  </el-input></span>
                  <a style="margin-right: 8px;float: right;" @click.stop="deleteTreeItem(data)"> 
                        <el-icon :size="size" :color="color">
                          <Delete />
                        </el-icon>
                      </a>
                </template>
              </el-tree>
            </div>

js：
<script setup name="Bznr">

  const { proxy } = getCurrentInstance();
  const deptOptions = ref(undefined);
  const cateNameInput = ref("")

  /** 通过条件过滤节点  */
  const filterNode = (value, data) => {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  };

  /** 查询部门下拉树结构 */
  function getDeptTree() {
    deptTreeSelect().then(response => {
      deptOptions.value = response.data;
    });
  };

  // 选择标准化树传值获取相应的列表数据
  function handleNodeClick(data,node){
    console.log(258,data,node)
    queryParams.value.id = data.id
    queryParams.value.parentId = node.parent.data.id
    getList()
  }

//双击节点的名称修改名称
function editCateName(data) {
      cateNameInput.value = data.label;
      isEdit.value = data.id;
      nextTick(() => {
        proxy.$refs[data.id] && proxy.$refs[data.id].focus();// 获取输入框，自动获取焦点
      });
    }

//失去焦点之后执行的方法
function editSave(val, data) {
      const inputName = val.target.value.trim();
      if (inputName == '') {
        proxy.$modal.msgWarning("分类名称不能为空,请重新输入");
        isEdit.value = -1; // 让文本span标签显示，输入框隐藏
        return;
      }
      if (inputName == data.label) {
        isEdit.value = -1;
        return;
      }
      isEdit.value = -1;
      let param = {
        id: data.id,
        label: inputName
      };
      form.value.content = cateNameInput.value
      form.value.idCopy = data.id
      updateBznr(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
        getDeptTree()
      });
    }

 // 点击删除按钮
function deleteTreeItem (data) {
  const idarr = []
  idarr.push(data.id)
  // ---删除树节点
  proxy.$modal.confirm('是否确认删除质量标准化为"' + data.label + '"的数据项？').then(function() {
      return delBznr(idarr);
    }).then(() => {
      getList();
      getDeptTree()
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
}
</script>

小功能分享给大家，后续有更多功能需求会持续更新的，希望可以帮助到大家~~_///(^v^)\~~