vue3-treeselect数据绑定失败的解决方案_Javascript

vue3-treeselect数据绑定失败

目标插件

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

问题描述

是用这个插件做数据绑定的时候会出现这样的问题，当第一次赋值(v-model)时，可以实现选中，但当数据变化时，选中的数据还是之前的数据，不会自动的切换选中的数据。

              <treeselect
                v-model="form.parentid"
                :options="deptoptions"
                :normalizer="normalizer"
                placeholder="选择上级部门"
                ref="depttree"
              />

即代码中的form-parentid变化时，仍然显示选中之前的数据。

解决方案

手动选中

depttree.value?.select(depttree.value?.getnode(row.deptid));

这里的depttree是获取的treeselectdom对象

const depttree: ref<typeof treeselect | null> = ref(null);

vue3-treeselect绑定数据有bug问题

vue3-treeselect，在第一次绑定值的时候没有问题，但是第二次开始无法绑定，知道各位有没有什么好的解决方法。

所以，我重写了个简单的，没那么多功能的就只有v-model，options，placeholder，normalizer4个参数，下面把代码贴出来，需要注意的是，placeholder，normalizer这俩是非必须项，如果不需要可以不写，placeholder不写，默认是空，normalizer不写默认是

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

不过大佬们看看代码估计也就懂了

<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: {
      //这里是绑定参数
      modelvalue: {
        type: number,
        default: undefined,
      },
      //这里是数组
      options: {
        type: array,
        default: undefined,
      },
      //placeholder
      placeholder: {
        type: string,
        default: '',
      },
      //这里是转换方法
      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里的值不会自动赋值给state中常量，只有第一次过来的时候才会赋值之后需要手动赋值
        state.singleselecttreekey = newvalue.modelvalue
        state.selecttreedata = newvalue.options
        initialize()
      })

      //防止不写normalizer报错
      const defaultnormalizer = () => {
        if (!state.selecttreedefaultprops) {
          state.selecttreedefaultprops = {
            id: 'id',
            label: 'label',
            children: 'children',
          }
        }
      }
      //初始化
      const initialize = () => {
        if (state.singleselecttreekey != null) {
          state['singleselecttree'].setcurrentkey(state.singleselecttreekey) // 设置默认选中
          let node = state['singleselecttree'].getnode(
            state.singleselecttreekey
          )
          state.singleselecttreeval =
            node.data[state.selecttreedefaultprops['label']]
          state.singleselecttreekey =
            node.data[state.selecttreedefaultprops['id']]
        } else {
          selecttreeclearhandle()
        }
      }
      // 清除单选树选中
      const selecttreeclearhandle = () => {
        state.selecttreedefaultselectedkeys = []
        clearselected()
        emit('update:modelvalue', null)
        state.singleselecttreeval = ''
        state.singleselecttreekey = null
        state['singleselecttree'].setcurrentkey(null) // 设置默认选中
      }
      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;
          }
        }
      }

有需要的各位随意取用！