Vue Treeselect使用常见问题汇总及解决办法(适配vue3.x)

vue3.x适配方案 vue3-treeselect

npm install --save vue3-treeselect

<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

<script>
  // import the component
  import Treeselect from 'vue3-treeselect'
  // import the styles
  import 'vue3-treeselect/dist/vue3-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>

1.自定义键名

如果通过AJAX加载的选项数据与vue-treeselect要求的数据结构不同，例如，您的数据具有name属性，但vue-treeselect需要label，则可能需要自定义键名。在这种情况下，您可以提供一个称为函数的propnormalizer，在数据初始化期间它将传递给树中的每个节点。使用此函数创建并返回转换后的对象。

normalizer

<tempalte>
    <treeselect  :options="options" :normalizer="normalizer" />
</tempalte>
<script>
    export default {
        data (){
            return {
                options: [ {
			      key: 'a',
			      name: 'a',
			      subOptions: [ {
			        key: 'aa',
			        name: 'aa',
			      } ],
			    } ],
			    normalizer(node) {
			      return {
			        id: node.key,
			        label: node.name,
			        children: node.subOptions,
			      }
			    },
            }
        }
    }
</script>

2.chidlren为空（包含[]和null）时，不展示下拉角标和No options available 提示 (重要)

API调整：chidlren没有值时，将children字段移除;

<tempalte>
    <treeselect :normalizer="normalizer" :options="options"/>
</tempalte>
<script>
    export default {
        data (){
            return {
                options: mockData,
                normalizer() {   				// 自定义数据字段
                    id: node.key, 				// 自定义选中值
                    label: node.name,			// 自定义标签显示
                    children: node.subOptions && node.subOptions.length > 0 ? node.subOptions: 0,	 // 自定义下级chidlren字段
                }
            }
        }
    }
</script>

3.禁用分支节点

<tempalte>
    <treeselect :options="options" :disable-branch-nodes="true" />
</tempalte>
<script>
    export default {
        data (){
            return {
                options: []
            }
        }
    }
</script>

4.节点选中时触发自定义方法

<tempalte>
    <treeselect :normalizer="normalizer" 
                :options="options" 
                :disable-branch-nodes="true" 
                @select="handleSelect" />
</tempalte>
<script>
    export default {
        data (){
            return {
                options: mockData
            }
        },
        methods: {
            handleSelect(node) {
            	// TODO 需要做的事情
            }
        }
    }
</script>

持续更新中...