vue3-treeselect數(shù)據(jù)綁定失敗的解決方案

更新時(shí)間：2024年05月23日 15:43:48 作者：<Michael>

這篇文章主要介紹了vue3-treeselect數(shù)據(jù)綁定失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3-treeselect數(shù)據(jù)綁定失敗

目標(biāo)插件

https://github.com/megafetis/vue3-treeselect

問(wèn)題描述

是用這個(gè)插件做數(shù)據(jù)綁定的時(shí)候會(huì)出現(xiàn)這樣的問(wèn)題，當(dāng)?shù)谝淮钨x值(v-model)時(shí)，可以實(shí)現(xiàn)選中，但當(dāng)數(shù)據(jù)變化時(shí)，選中的數(shù)據(jù)還是之前的數(shù)據(jù)，不會(huì)自動(dòng)的切換選中的數(shù)據(jù)。

              <treeselect
                v-model="form.parentId"
                :options="deptOptions"
                :normalizer="normalizer"
                placeholder="選擇上級(jí)部門(mén)"
                ref="deptTree"
              />

即代碼中的form-parentId變化時(shí)，仍然顯示選中之前的數(shù)據(jù)。

解決方案

手動(dòng)選中

deptTree.value?.select(deptTree.value?.getNode(row.deptId));

這里的deptTree是獲取的treeselectDom對(duì)象

const deptTree: Ref<typeof Treeselect | null> = ref(null);

vue3-treeselect綁定數(shù)據(jù)有bug問(wèn)題

Vue3-treeSelect，在第一次綁定值的時(shí)候沒(méi)有問(wèn)題，但是第二次開(kāi)始無(wú)法綁定，知道各位有沒(méi)有什么好的解決方法。

所以，我重寫(xiě)了個(gè)簡(jiǎn)單的，沒(méi)那么多功能的就只有v-model，options，placeholder，normalizer4個(gè)參數(shù)，下面把代碼貼出來(lái)，需要注意的是，placeholder，normalizer這倆是非必須項(xiàng)，如果不需要可以不寫(xiě)，placeholder不寫(xiě)，默認(rèn)是空，normalizer不寫(xiě)默認(rèn)是

{
id: ‘id',
label: ‘label',
children: ‘children',
}

不過(guò)大佬們看看代碼估計(jì)也就懂了

<template>
  <div class="tree-container">
    <el-select
      ref="singleTree"
      v-model="singleSelectTreeVal"
      class="vab-tree-select"
      clearable
      :placeholder="placeholder"
      popper-class="select-tree-popper"
      value-key="id"
      @clear="selectTreeClearHandle('single')"
    >
      <el-option :value="singleSelectTreeKey">
        <el-tree
          id="singleSelectTree"
          ref="singleSelectTree"
          :current-node-key="singleSelectTreeKey"
          :data="selectTreeData"
          :default-expanded-keys="selectTreeDefaultSelectedKeys"
          :highlight-current="true"
          :node-key="selectTreeDefaultProps.id"
          :props="selectTreeDefaultProps"
          @node-click="selectTreeNodeClick"
        >
          <template #defalut="{ node }" class="vab-custom-tree-node">
            <span class="vab-tree-item">{{ node.label }}</span>
          </template>
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import { onBeforeMount, onMounted, reactive, toRefs, watch } from 'vue'

  export default {
    name: 'VabSingleSelectTree',
    props: {
      //這里是綁定參數(shù)
      modelValue: {
        type: Number,
        default: undefined,
      },
      //這里是數(shù)組
      options: {
        type: Array,
        default: undefined,
      },
      //placeholder
      placeholder: {
        type: String,
        default: '',
      },
      //這里是轉(zhuǎn)換方法
      normalizer: {
        type: Object,
        default: undefined,
      },
    },
    emits: ['update:modelValue'],
    // { emit }
    setup(props, { emit }) {
      //$emit('update:modelValue', $event.target.value)
      const state = reactive({
        singleSelectTree: null,
        singleTree: null,
        singleSelectTreeKey: props.modelValue,
        singleSelectTreeVal: null,
        selectTreeData: props.options,
        selectTreeDefaultSelectedKeys: [],
        selectTreeDefaultProps: props.normalizer,
      })
      onBeforeMount(() => {
        defaultNormalizer()
      })
      //首次加載
      onMounted(() => {
        initialize()
      })
      watch(props, (newValue) => {
        //這里props里的值不會(huì)自動(dòng)賦值給state中常量，只有第一次過(guò)來(lái)的時(shí)候才會(huì)賦值之后需要手動(dòng)賦值
        state.singleSelectTreeKey = newValue.modelValue
        state.selectTreeData = newValue.options
        initialize()
      })

      //防止不寫(xiě)Normalizer報(bào)錯(cuò)
      const defaultNormalizer = () => {
        if (!state.selectTreeDefaultProps) {
          state.selectTreeDefaultProps = {
            id: 'id',
            label: 'label',
            children: 'children',
          }
        }
      }
      //初始化
      const initialize = () => {
        if (state.singleSelectTreeKey != null) {
          state['singleSelectTree'].setCurrentKey(state.singleSelectTreeKey) // 設(shè)置默認(rèn)選中
          let node = state['singleSelectTree'].getNode(
            state.singleSelectTreeKey
          )
          state.singleSelectTreeVal =
            node.data[state.selectTreeDefaultProps['label']]
          state.singleSelectTreeKey =
            node.data[state.selectTreeDefaultProps['id']]
        } else {
          selectTreeClearHandle()
        }
      }
      // 清除單選樹(shù)選中
      const selectTreeClearHandle = () => {
        state.selectTreeDefaultSelectedKeys = []
        clearSelected()
        emit('update:modelValue', null)
        state.singleSelectTreeVal = ''
        state.singleSelectTreeKey = null
        state['singleSelectTree'].setCurrentKey(null) // 設(shè)置默認(rèn)選中
      }
      const clearSelected = () => {
        const allNode = document.querySelectorAll(
          '#singleSelectTree .el-tree-node'
        )
        allNode.forEach((element) => element.classList.remove('is-current'))
      }
      const selectTreeNodeClick = (data) => {
        state.singleSelectTreeVal = data[state.selectTreeDefaultProps['label']]
        state.singleSelectTreeKey = data[state.selectTreeDefaultProps['id']]
        emit('update:modelValue', state.singleSelectTreeKey)
        state['singleTree'].blur()
        //data
        // if (data.rank >= this.selectLevel) {
        //
        // }
      }
      return {
        ...toRefs(state),
        selectTreeClearHandle,
        selectTreeNodeClick,
        defaultNormalizer,
        initialize,
      }
    },
  }
</script>

<style scoped></style>

/* .vab-hey-message */
    .vab-hey-message {
      @mixin vab-hey-message {
        min-width: 246px;
        padding: 15px;
        background-color: $base-color-white;
        border-color: $base-color-white;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

        .el-message__content {
          padding-right: $base-padding;
          color: #34495e;
        }

        .el-icon-close {
          color: #34495e;

          &:hover {
            opacity: 0.8;
          }
        }
      }

有需要的各位隨意取用！