目錄

1.tree組件

?2.實(shí)現(xiàn)思路

3.代碼實(shí)現(xiàn)

1. 頁面部分

2.js部分：

1.節(jié)點(diǎn)內(nèi)容渲染函數(shù)

2.節(jié)點(diǎn)后綴渲染函數(shù)

3.節(jié)點(diǎn)點(diǎn)擊事件

1.tree組件

? ? ?naive UI是Vue 3是組件庫，其中的tree組件可以生成樹形目錄結(jié)構(gòu)，官網(wǎng)提供了很多功能演示，例如拖放節(jié)點(diǎn)等。但是并沒有提供增刪改功能的演示。

?2.實(shí)現(xiàn)思路

? ? 參考element-ui tree結(jié)構(gòu)增刪改功能的實(shí)現(xiàn)思路，naive UI的tree組件實(shí)現(xiàn)思路可以概括為：

1. 增加功能：點(diǎn)擊增加按鈕，增加一個(gè)節(jié)點(diǎn)，前端實(shí)現(xiàn)輸入框，可以在輸入框中修改節(jié)點(diǎn)名稱。
2. 修改功能：雙擊節(jié)點(diǎn)，節(jié)點(diǎn)變?yōu)檩斎肟?，可以在輸入框中修改?jié)點(diǎn)名稱。
3. 刪除功能：選中節(jié)點(diǎn)，出現(xiàn)刪除按鈕，點(diǎn)擊刪除按鈕可以刪除節(jié)點(diǎn)。

3.代碼實(shí)現(xiàn)

? ? naive UI的tree組件提供了節(jié)點(diǎn)內(nèi)容渲染函數(shù)，節(jié)點(diǎn)后綴渲染函數(shù)，增刪改的功能可以結(jié)合節(jié)點(diǎn)點(diǎn)擊事件、節(jié)點(diǎn)內(nèi)容渲染函數(shù)和節(jié)點(diǎn)后綴渲染函數(shù)來實(shí)現(xiàn)。

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.節(jié)點(diǎn)內(nèi)容渲染函數(shù)

根據(jù)option.isedit參數(shù)判斷節(jié)點(diǎn)渲染出來的是輸入框還是文本，props.isedit用來控制在使用該組件是否開啟編輯功能。

//節(jié)點(diǎn)內(nèi)容渲染函數(shù)
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.節(jié)點(diǎn)后綴渲染函數(shù)

用option.children來判斷tree的層級，來確定渲染的后綴是刪除按鈕還是增加按鈕。?option.key == key.value用來判斷該節(jié)點(diǎn)是否被選中，選中增渲染出刪除按鈕。

//節(jié)點(diǎn)后綴渲染
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()//自定義節(jié)點(diǎn)刪除函數(shù)
        }
      },
      { 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)//自定義新增節(jié)點(diǎn)函數(shù)
      },
      { default: () => '+新增' }
    )
  }
}

3.節(jié)點(diǎn)點(diǎn)擊事件

單擊為選中節(jié)點(diǎn)事件，雙擊為編輯節(jié)點(diǎn)事件，雙擊節(jié)點(diǎn)，?option.isedit = true，使得節(jié)點(diǎn)渲染函數(shù)渲染出輸入框，可以修改節(jié)點(diǎn)名稱。文章來源地址http://www.zghlxwxcb.cn/news/detail-528289.html

const key = ref()
//節(jié)點(diǎn)點(diǎn)擊事件
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()
      })
    }
  }
}

到了這里，關(guān)于naive UI tree組件實(shí)現(xiàn)增刪改功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！