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

 更新时间:2024年05月23日 15:43:48   作者:<Michael>  
这篇文章主要介绍了vue3-treeselect数据绑定失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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;
          }
        }
      }

有需要的各位随意取用!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现下拉框二级联动效果的实例代码

    vue实现下拉框二级联动效果的实例代码

    这篇文章主要介绍了vue实现下拉框二级联动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • vue 中基于html5 drag drap的拖放效果案例分析

    vue 中基于html5 drag drap的拖放效果案例分析

    本文通过三个案例给大家介绍了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以参考下
    2018-11-11
  • 详解Vue.js项目API、Router配置拆分实践

    详解Vue.js项目API、Router配置拆分实践

    这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue组件解析之如何自定义弹窗组件ByDialog

    Vue组件解析之如何自定义弹窗组件ByDialog

    这篇文章主要介绍了Vue组件解析之如何自定义弹窗组件ByDialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue中import导入三种方式详解

    vue中import导入三种方式详解

    在使用vue开发项目的时候,很多使用会import很多模块,这篇文章主要给大家介绍了关于vue中import导入三种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • Vuejs中的watch实例详解(监听者)

    Vuejs中的watch实例详解(监听者)

    本文通过实例代码给大家介绍了Vuejs中的watch,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-01-01
  • Vue transition过渡组件详解

    Vue transition过渡组件详解

    我们现在可以了解一下vue的过渡,vue在插入、更新以及移除DOM元素的时候,提供了很多不同方式过渡的效果,如果在css过渡自动应用class,在过渡钩子函数中使用JavaScript直接操作DOM就可以了
    2022-08-08
  • Unocss(原子化css) 使用及vue3 + vite + ts讲解

    Unocss(原子化css) 使用及vue3 + vite + ts讲解

    这篇文章主要介绍了Unocss(原子化css)使用vue3 + vite + ts的方法,简单介绍了Unocss使用及图标库使用,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 使用vant 自定义弹框全过程

    使用vant 自定义弹框全过程

    这篇文章主要介绍了使用vant 自定义弹框全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue实现按钮文字动态改变

    vue实现按钮文字动态改变

    这篇文章主要介绍了vue实现按钮文字动态改变方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论