Vue通用下拉树组件@riophae/vue-treeselect的使用

<template>
  <treeselect
    v-model="value"
    :multiple="true"
    :options="options"
    :flat="true"
    :default-expand-level="2"
    :sort-value-by="sortValueBy"
    :placeholder="placeholder"
    :noOptionsMessage="noOptionsMessage"
    :noResultsMessage="noResultsMessage"
    :maxHeight="300"
  />
</template>
 
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [
        { id: 'a', label: 'a' },
        { id: 'b', label: 'b', children: [{ id: 'b1', label: 'b1' }] }
      ],
      sortValueBy: 'ORDER_SELECTED',
      placeholder: 'Select your options',
      noOptionsMessage: 'No options available',
      noResultsMessage: 'No results found'
    }
  }
}
</script>

这个代码实例展示了如何在Vue应用中使用@riophae/vue-treeselect组件来创建一个多选的树形下拉列表。代码中定义了组件的数据属性，包括选中的值、下拉列表的选项、以及相关的配置项。同时，展示了如何通过v-model来双向绑定数据，以及如何自定义占位符、无选项和无结果时的提示信息。