關(guān)于vue-treeselect綁值、回顯等常見(jiàn)問(wèn)題的總結(jié)

更新時(shí)間：2022年07月26日 09:19:21 作者：花眼熊

這篇文章主要介紹了關(guān)于vue-treeselect綁值、回顯等常見(jiàn)問(wèn)題的總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-treeselect綁值、回顯常見(jiàn)問(wèn)題

最近vue-treeselect使用的比較多，分享一波

可以用在表單里，也可以用在可編輯的表格內(nèi)

這里以表單里的舉例

在main.js中引入

import ElTreeSelect from ‘el-tree-select'
import Treeselect from ‘@riophae/vue-treeselect'
import ‘@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.use(ElTreeSelect)
Vue.component(‘TreeSelect', Treeselect)

最主要的幾點(diǎn)就是

1、綁值:value=“form.astdeptId”，主要綁的就是id或者code，通過(guò)id或code找到對(duì)應(yīng)的label回顯

2、options是數(shù)據(jù)源，正常調(diào)接口獲取就行了

3、append-to-body="true"這個(gè)最好加上，可能會(huì)遇到下拉的彈窗打不開(kāi)或者只有一點(diǎn)點(diǎn)高的情況

4、normalizer就是把我們自己的后端返的數(shù)據(jù)格式按樹(shù)插件需要的格式轉(zhuǎn)換

5、select點(diǎn)擊事件里賦值

6、插槽slot=“option-label” 是下拉框的值

7、插槽slot=“value-label” 是輸入框回顯的值

<el-form-item label="上級(jí)部門(mén):">
              <TreeSelect
                :value="form.astdeptId"
                :options="zoneCodeOptions"
                clearable            
                no-options-text="暫無(wú)可用選項(xiàng)"
                :append-to-body="true"
                :normalizer="tenantIdnormalizer"
                open-direction="bottom"
                placeholder="請(qǐng)選擇父級(jí)節(jié)點(diǎn)"
                @select="node => tenantIdHandleSelect(node)"
              >
                <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px">
                  {{ node.raw.name ? node.raw.name : '' }}
                </div>
                <div slot="value-label" slot-scope="{ node }">{{ node.raw.name ? node.raw.name : '' }}</div>
              </TreeSelect>
            </el-form-item>

打印node，拿對(duì)應(yīng)的id，label和children

?tenantIdnormalizer(node) {
??
? ? ? if (node.children && !node.children.length) {
? ? ? ? delete node.children
? ? ? }
? ? ? return {
? ? ? ? id: node.astdeptId,
? ? ? ? label: node.name,
? ? ? ? children: node.children,
? ? ? }
? ? },

賦值給 this.form.astdeptId

? ? tenantIdHandleSelect(node) {
? ? ? this.form.astdeptId = node.astdeptId
? ? ? this.form.name = node.name
? ? },

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

問(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;
? ? ? ? ? }
? ? ? ? }
? ? ? }

有需要的各位隨意取用吧

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: