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

cnpm install --save @riophae/vue-treeselect   

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

import Treeselect from '@riophae/vue-treeselect'

npm install --save vue3-treeselect

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

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

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

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
        }
    },
})

<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="请选择，默认为所有检察机关"
        clearable filterable accordion
        style="width:100%"
        @change="changeJCJGID()"
      />