一、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的話，使用該安裝命令會提示，此命令只針對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
vue中的官網(wǎng)：https://www.vue-treeselect.cn/

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'} 
],

而后臺給的數(shù)據(jù)肯定字段名與要求不太一致：
因此，需要把后臺數(shù)據(jù)格式適配成與 vue3-treeselect 一致的數(shù)據(jù)，此時適用內(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

二、Element-plus的TreeSelect組件

如果項(xiàng)目使用的element-plus組件庫，此方法更好用文章來源地址http://www.zghlxwxcb.cn/news/detail-615195.html

<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="請選擇，默認(rèn)為所有檢察機(jī)關(guān)"
        clearable filterable accordion
        style="width:100%"
        @change="changeJCJGID()"
      />

到了這里，關(guān)于vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！