vue Treeselect 树形下拉框 1.使用 2.问题总结

资源连接：https://blog.csdn.net/weixin_42414668/article/details/86715620

API  :   https://vue-treeselect.js.org/#events

A.安装：

1.在项目中：   cnpm install --save @riophae/vue-treeselect

2.script引入：

// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3.components: { Treeselect },

完整代码：

<template>
<treeselect v-model="DRHA_EFaultModeTree_value"
            :multiple="true" 
            :options="DRHA_EFaultModeTree_options"
            :flat="true"
            :show-count="true"
            :disable-branch-nodes="true"
            placeholder=" 请选择..."/>

</template>

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


  export default {
    components: { Treeselect },
    data() {
      return {
        
        DRHA_EFaultModeTree_value: null,
        // define options
        DRHA_EFaultModeTree_options: [ {
          id: '1',
          label: 'Fruits',
          children: [ {
            id: '1-1',
            label: 'Apple ?',
            isNew: true,
          }, {
            id: '1-2',
            label: 'Grapes ?',
          }, {
            id: '1-3',
            label: 'Pear ?',
          }, {
            id: '1-4',
            label: 'Strawberry ?',
          }, {
            id: 'watermelon',
            label: 'Watermelon ?',
          } ],
        }, {
          id: 'vegetables',
          label: 'Vegetables',
          children: [ {
            id: 'corn',
            label: 'Corn ?',
          }, {
            id: 'carrot',
            label: 'Carrot ?',
          }, {
            id: 'eggplant',
            label: 'Eggplant ?',
          }, {
            id: 'tomato',
            label: 'Tomato ?',
          } ],
        } ],
      };
    },
    mounted: function(){
       
    },
    methods: {
        
    }
  };
</script>

 

B.问题总结：

1.问题：选中所有子节点，value显示父节点。解决方法：    :flat="true"

 <treeselect v-model="DRHA_EFaultModeTree_value"
             :multiple="true" 
             :options="DRHA_EFaultModeTree_options"
             placeholder=" 请选择..."/>

 <treeselect v-model="DRHA_EFaultModeTree_value"
             :multiple="true" 
             :options="DRHA_EFaultModeTree_options"
             :flat="true"
             placeholder=" 请选择..."/>

2.设置为只能选中最小叶子节点：     :disable-branch-nodes="true"

<treeselect v-model="DRHA_EFaultModeTree_value"
            :multiple="true" 
            :options="DRHA_EFaultModeTree_options"
            :flat="true"
            :show-count="true"
            :disable-branch-nodes="true"
              placeholder=" 请选择..."/>

 

3.显示 字节的个数               :show-count="true"