naive UI tree组件实现增删改功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了naive UI tree组件实现增删改功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.tree组件

2.实现思路

3.代码实现

1. 页面部分

2.js部分：

1.节点内容渲染函数

2.节点后缀渲染函数

3.节点点击事件

1.tree组件

naive UI是Vue 3是组件库，其中的tree组件可以生成树形目录结构，官网提供了很多功能演示，例如拖放节点等。但是并没有提供增删改功能的演示。

naive UI tree组件实现增删改功能,javascript,前端,vue,typescript

2.实现思路

参考element-ui tree结构增删改功能的实现思路，naive UI的tree组件实现思路可以概括为：

增加功能：点击增加按钮，增加一个节点，前端实现输入框，可以在输入框中修改节点名称。
修改功能：双击节点，节点变为输入框，可以在输入框中修改节点名称。
删除功能：选中节点，出现删除按钮，点击删除按钮可以删除节点。

3.代码实现

naive UI的tree组件提供了节点内容渲染函数，节点后缀渲染函数，增删改的功能可以结合节点点击事件、节点内容渲染函数和节点后缀渲染函数来实现。

naive UI tree组件实现增删改功能,javascript,前端,vue,typescript

1. 页面部分

<template>
  <div class="input-div">
    <n-space justify="center">
      <n-input
        v-model:value="pattern"
        size="small"
        class="input"
        placeholder="按名称查询"
      ></n-input>
    </n-space>
  </div>
  <div class="div-tree" >
    <n-tree
      class="tree"
      selectable
      :pattern="pattern"
      :data="datatree"
      :node-props="checkCamera"
      :render-switcher-icon="renderSwitcherIcon"
      default-expand-all
      block-line
      show-irrelevant-nodes
      :render-label="nodelabel"
      :render-suffix="nodesuffix"
    />
  </div>
</template>

2.js部分：

1.节点内容渲染函数

根据option.isedit参数判断节点渲染出来的是输入框还是文本，props.isedit用来控制在使用该组件是否开启编辑功能。

//节点内容渲染函数
const inputRef = ref()
const nodelabel = ({ option }: { option: TreeOption }) => {
  //  console.log(option.key)
  return h(
    'div',
    { class: 'node', style: { height: '0.25rem', width: '1.8rem' } },
    option.isedit == true && props.isedit
      ? h(NInput, {
          autofocus: true,
          ref: inputRef,
          size: 'small',
          value: option.label,
          onUpdateValue: v => {
            option.label = v
          },
          onChange: () => {
            option.isedit = false
          },
          onBlur: () => {
            option.isedit = false
          }
        })
      : option.label
  )
}

2.节点后缀渲染函数

用option.children来判断tree的层级，来确定渲染的后缀是删除按钮还是增加按钮。 option.key == key.value用来判断该节点是否被选中，选中增渲染出删除按钮。

//节点后缀渲染
const nodesuffix = ({ option }: { option: TreeOption }) => {
  if (
    !option.children &&
    option.key == key.value &&
    props.isdelect
  ) {
    return h(
      NButton,
      {
        text: true,
        type: 'info',
        color: '#00EAFF',
        size: 'tiny',
        onClick: e => {
          deltree(option.key), e.stopPropagation()//自定义节点删除函数
        }
      },
      { default: () => '删除' }
    )
  } else if ((option.children) && props.isadd) {
    return h(
      NButton,
      {
        type: 'info',
        color: '#007293',
        bordered: true,
        round: true,
        size: 'tiny',
        textcolor: '#CFFBFF',
        onClick: e => addnode(e, option.key)//自定义新增节点函数
      },
      { default: () => '+新增' }
    )
  }
}

3.节点点击事件

单击为选中节点事件，双击为编辑节点事件，双击节点， option.isedit = true，使得节点渲染函数渲染出输入框，可以修改节点名称。文章来源地址https://www.toymoban.com/news/detail-528289.html

const key = ref()
//节点点击事件
const checkCamera = ({ option }: { option: TreeOption }) => {
  return {
    onClick() {
      emits('optionlabel', option.label)
      //console.log(option.label)
      key.value = option.key
    },
    ondblclick() {
      //双击事件
      option.isedit = true
      nextTick(() => {
        inputRef.value.focus()
      })
    }
  }
}

到了这里，关于naive UI tree组件实现增删改功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！