vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用

更新時(shí)間：2024年05月23日 11:50:07 作者：迷小圈

這篇文章主要介紹了vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、vue-treeselect的使用

1、版本問題

1.1、vue2 使用的版本

官網(wǎng)地址：https://www.npmjs.com/package/@riophae/vue-treeselect

是3年前更新的

安裝：

cnpm install --save @riophae/vue-treeselect

如果你的項(xiàng)目是vue3的話，使用該安裝命令會(huì)提示，此命令只針對(duì)vue2.2版本

具體提示內(nèi)容是：

peerDependencies WARNING @riophae/vue-treeselect@latest requires a peer of vue@^2.2.0 but vue@3.2.39 was installed

結(jié)果：

"@riophae/vue-treeselect": "^0.4.0",

引入

import Treeselect from '@riophae/vue-treeselect'

1.2、vue3.x使用的版本

官網(wǎng)地址：https://www.npmjs.com/package/vue3-treeselect

2、安裝vue3-treeselect，vue3的版本

安裝：

npm install --save vue3-treeselect

結(jié)果

 "dependencies": {
    "vue": "^3.2.25",
    "vue3-treeselect": "^0.1.10"
  },

3、使用 vue3-treeselect

在vue頁面中適用樹形選擇組件

 <treeselect v-model="state.JCJGCity" :multiple="true"   :options="state.cityTreeData"
             :normalizer="state.normalizer" placeholder="默認(rèn)所有"
             style="width: 50%;">
</treeselect>
// import the component
import Treeselect from 'vue3-treeselect'
// import the styles
import 'vue3-treeselect/dist/vue3-treeselect.css'

注：

此處的cityTreeData為后端返回的數(shù)據(jù)
由于 vue3-treeselect 插件適用的數(shù)據(jù)格式是：id、label、children

options: [ 
        {id: 'a',label: 'a',
          children: [ 
	          {id: 'aa',label: 'aa'} 
	          {id: 'ab',label: 'ab'} ],
        }, 
        {id: 'b',label: 'b'}, 
        {id: 'c',label: 'c'} 
],

而后臺(tái)給的數(shù)據(jù)肯定字段名與要求不太一致：

因此，需要把后臺(tái)數(shù)據(jù)格式適配成與 vue3-treeselect 一致的數(shù)據(jù)

此時(shí)適用內(nèi)置的 :normalizer=“state.normalizer” 屬性即可

const state = reactive({
    cityTreeData: [],
    JCJGCity:null,
    normalizer(node){       
        if (node.childList && !node.childList.length) {   //去掉childList=[]的情況
            delete node.childList;
        }
        return {
            id: node.id,    //字段名的替換
            label: node.name,
            children: node.childList
        }
    },
})

這樣，就已經(jīng)實(shí)現(xiàn)可搜索，可多選的功能了

4、自定義方法Event

Name	屬性	描述
open	(instanceId)	菜單打開時(shí)發(fā)出
close	(value, instanceId)	菜單關(guān)閉時(shí)發(fā)出
input	(value, instanceId)	值更改后發(fā)出
select	(node, instanceId)	選擇一個(gè)選項(xiàng)后發(fā)出
deselect	(node, instanceId)	取消選擇一個(gè)選項(xiàng)后發(fā)出
search-change	(searchQuery, instanceId)	搜索查詢更改后發(fā)出

二、Element-plus的TreeSelect組件

如果項(xiàng)目使用的element-plus組件庫，此方法更好用

<el-tree-select
    v-model="value"
    :data="data"
    :render-after-expand="false"
    show-checkbox
  />

<el-tree-select
        v-model="state.JCJGID"
        :data="state.cityTreeData"
        :render-after-expand="false" check-strictly
        :props="defaultProps"
        placeholder="請(qǐng)選擇，默認(rèn)為所有檢察機(jī)關(guān)"
        clearable filterable accordion
        style="width:100%"
        @change="changeJCJGID()"
      />