在VUE单页应用项目开发过程树形中有一个需求,需要选中树形控件(可以是点击选中行或者复选框),但是只能选中一个。控件使用的是Element ui中的el-tree,但是找了一下并没有单选组件的API, 于是看到vue有个组件:

vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。

  • 支持嵌套选项的单选和多选
  • 模糊匹配
  • 异步搜索
  • 延迟加载(仅在需要时加载深度选项的数据)
  • 键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等)
  • 丰富的选项和高度可定制的
  • 支持 多种浏览器

 Vue-Treeselect | Vue-Treeselect 中文网vue-treeselect是一个多选组件,具有对 Vue.js嵌套选项支持,目前vue-treeselect需要Vue 2.2+版本的支持。https://www.vue-treeselect.cn/#customize-option-label

 实现的效果如下:

 下面废话不多说,直接开干:

1.先安装:

npm install --save @riophae/vue-treeselect

 以上就是安装成功了!接着我们开始引入组件

2.组件引入

   1.全局引入:

      在main.js中插入如下代码:     

import Treeselect from '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('Treeselect',Treeselect)

 这种引入的话,页面直接使用:

 <Treeselect
   placeholder="请选择.."
          :multiple="true"
          :options="options"
          :value-consists-of="valueConsistsOf"
          :disable-branch-nodes="false"
          v-model="value"
          search-nested
          searchable
          @select="nodeSelect"
          @deselect="nodeCancelSelect"         
/>

 2.局部引入,在当前的页面引入:

直接再当前页面的视图中写入的代码:

  

<template>
    省略................... 
        <treeselect
          placeholder="请选择.."
          :multiple="true"
          :options="options"
          :value-consists-of="valueConsistsOf"
          :disable-branch-nodes="false"
          v-model="value"
          search-nested
          searchable
          @select="nodeSelect"
          @deselect="nodeCancelSelect"
        />
      省略...................
</template>

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

    export default {
        name: 'ComplexTable',
        components: { Treeselect },
        
        data() {
            return {
               
                value: [],
                valueConsistsOf: 'ALL',
                options: [{
                    id: '1',
                    label: '字节跳动科技有限公司',
                    children: [{
                        id: '11',
                        label: '产品研发部',
                        children:[{
                            id: '112',
                            label: 'java',
                            children:[{
                                id: '1121',
                                label: 'spring boot',
                            }, {
                                id: '1122',
                                label: 'java nacos',
                            }, {
                                id: '1123',
                                label: 'jetty',
                            }, {
                                id: '1124',
                                label: 'spring cloud eureka',
                                isDisabled: true
                            }, {
                                id: '1125',
                                label: 'zookeeper',
                                isDisabled: true
                            }],
                        }, {
                            id: '113',
                            label: 'go',
                        }, {
                            id: '114',
                            label: 'python',
                        }, {
                            id: '115',
                            label: 'php®',
                            isDisabled: true
                        }, {
                            id: '116',
                            label: 'c++',
                            isDisabled: true
                        }]
                    },{
                        id: '12',
                        label: '销售部门',
                        children: [{
                            id: '121',
                            label: '产品经理',
                        }, {
                            id: '122',
                            label: '销售一部',
                        }, {
                            id: '123',
                            label: '销售二部',
                        }, {
                            id: '124',
                            label: '销售三部',
                        }],
                    },{
                        id: '13',
                        label: '财务部',
                        children: [ {
                            id: '131',
                            label: '财务一部',
                        }, {
                            id: '132',
                            label: '财务二部',
                        }, {
                            id: '133',
                            label: '财务三部',
                        }, {
                            id: '134',
                            label: '财务四部',
                        }, {
                            id: '135',
                            label: '财务五部',
                        }, {
                            id: '136',
                            label: '财务六部',
                        }, {
                            id: '137',
                            label: '财务七部',
                        } ],
                    }]
                },{
                    id: '2',
                    label: 'PDD科技有限公司',
                    children: [{
                        id: '21',
                        label: '产品研发部',
                        children:[{
                            id: '212',
                            label: 'java',
                        }, {
                            id: '213',
                            label: 'go',
                        }, {
                            id: '214',
                            label: 'python',
                        }, {
                            id: '215',
                            label: 'php®',
                            isDisabled: true
                        }, {
                            id: '216',
                            label: 'c++',
                            isDisabled: true
                        }]
                    },{
                        id: '22',
                        label: '销售部门',
                        children: [{
                            id: '221',
                            label: '产品经理',
                        }, {
                            id: '222',
                            label: '销售一部',
                        }, {
                            id: '223',
                            label: '销售二部',
                        }, {
                            id: '224',
                            label: '销售三部',
                        }],
                    },{
                        id: '23',
                        label: '财务部',
                        children: [ {
                            id: '231',
                            label: '财务一部',
                        }, {
                            id: '232',
                            label: '财务二部',
                        }, {
                            id: '233',
                            label: '财务三部',
                        }, {
                            id: '234',
                            label: '财务四部',
                        }, {
                            id: '235',
                            label: '财务五部',
                        }, {
                            id: '236',
                            label: '财务六部',
                        }, {
                            id: '237',
                            label: '财务七部',
                        } ],
                    }]
                },
                    {
                        id: '3',
                        label: '蚂蚁科技有限公司',
                        children: [{
                            id: '31',
                            label: '产品研发部',
                            children:[{
                                id: '311',
                                label: 'java',
                            }, {
                                id: '312',
                                label: 'go',
                            }, {
                                id: '313',
                                label: 'python',
                            }, {
                                id: '314',
                                label: 'php®',
                                isDisabled: true
                            }, {
                                id: '315',
                                label: 'c++',
                                isDisabled: true
                            }]
                        },{
                            id: '32',
                            label: '销售部门',
                            children: [{
                                id: '321',
                                label: '产品经理',
                            }, {
                                id: '322',
                                label: '销售一部',
                            }, {
                                id: '323',
                                label: '销售二部',
                            }, {
                                id: '324',
                                label: '销售三部',
                            }],
                        },{
                            id: '33',
                            label: '财务部',
                            children: [ {
                                id: '331',
                                label: '财务一部',
                            }, {
                                id: '332',
                                label: '财务二部',
                            }, {
                                id: '333',
                                label: '财务三部',
                            }, {
                                id: '334',
                                label: '财务四部',
                            }, {
                                id: '335',
                                label: '财务五部',
                            }, {
                                id: '336',
                                label: '财务六部',
                            }, {
                                id: '337',
                                label: '财务七部',
                            } ],
                        }]
                    }
                ],
                DRHA_EFaultModeTree_value: null,
                DRHA_EFaultModeTree_lables: [],
            }
        },
        created() {
           
        },
        mounted() {
          
        },
        methods: {
            nodeSelect(node, instanceId){
                console.log(node, instanceId, 'select')
                this.DRHA_EFaultModeTree_lables.push(node.label);
                console.log(this.DRHA_EFaultModeTree_lables, 'select')
            },
            nodeCancelSelect(node, instanceId){
                console.log(node, instanceId, 'delete')
                for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
                    if(node.label == this.DRHA_EFaultModeTree_lables[i]){
                        this.DRHA_EFaultModeTree_lables.splice(i,1);
                    }
                }
                console.log(this.DRHA_EFaultModeTree_lables, 'delete')
            },
        }
    }
</script>

view视图中的代码如下:

<el-dialog title="岗位设置" :visible.sync="dialogFormVisible">
      <el-card shadow="never" style="max-width: 1250px;min-height: 500px;margin: 20px auto;">
        <treeselect
          placeholder="请选择.."
          :multiple="true"
          :options="options"
          :value-consists-of="all"
          :disable-branch-nodes="false"
          v-model="value"
          search-nested
          searchable
          @select="nodeSelect"
          @deselect="nodeCancelSelect"
        />
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button >
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="updateData">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
</el-dialog>

综合上面,最终的代码如下:

<template>
    省略................... 
        <treeselect
          placeholder="请选择.."
          :multiple="true"
          :options="options"
          :value-consists-of="valueConsistsOf"
          :disable-branch-nodes="false"
          v-model="value"
          search-nested
          searchable
          @select="nodeSelect"
          @deselect="nodeCancelSelect"
        />
      省略...................
</template>

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

    export default {
        name: 'ComplexTable',
        components: { Treeselect },
        
        data() {
            return {
               
                value: [],
                valueConsistsOf: 'ALL',
                options: [{
                    id: '1',
                    label: '字节跳动科技有限公司',
                    children: [{
                        id: '11',
                        label: '产品研发部',
                        children:[{
                            id: '112',
                            label: 'java',
                            children:[{
                                id: '1121',
                                label: 'spring boot',
                            }, {
                                id: '1122',
                                label: 'java nacos',
                            }, {
                                id: '1123',
                                label: 'jetty',
                            }, {
                                id: '1124',
                                label: 'spring cloud eureka',
                                isDisabled: true
                            }, {
                                id: '1125',
                                label: 'zookeeper',
                                isDisabled: true
                            }],
                        }, {
                            id: '113',
                            label: 'go',
                        }, {
                            id: '114',
                            label: 'python',
                        }, {
                            id: '115',
                            label: 'php®',
                            isDisabled: true
                        }, {
                            id: '116',
                            label: 'c++',
                            isDisabled: true
                        }]
                    },{
                        id: '12',
                        label: '销售部门',
                        children: [{
                            id: '121',
                            label: '产品经理',
                        }, {
                            id: '122',
                            label: '销售一部',
                        }, {
                            id: '123',
                            label: '销售二部',
                        }, {
                            id: '124',
                            label: '销售三部',
                        }],
                    },{
                        id: '13',
                        label: '财务部',
                        children: [ {
                            id: '131',
                            label: '财务一部',
                        }, {
                            id: '132',
                            label: '财务二部',
                        }, {
                            id: '133',
                            label: '财务三部',
                        }, {
                            id: '134',
                            label: '财务四部',
                        }, {
                            id: '135',
                            label: '财务五部',
                        }, {
                            id: '136',
                            label: '财务六部',
                        }, {
                            id: '137',
                            label: '财务七部',
                        } ],
                    }]
                },{
                    id: '2',
                    label: 'PDD科技有限公司',
                    children: [{
                        id: '21',
                        label: '产品研发部',
                        children:[{
                            id: '212',
                            label: 'java',
                        }, {
                            id: '213',
                            label: 'go',
                        }, {
                            id: '214',
                            label: 'python',
                        }, {
                            id: '215',
                            label: 'php®',
                            isDisabled: true
                        }, {
                            id: '216',
                            label: 'c++',
                            isDisabled: true
                        }]
                    },{
                        id: '22',
                        label: '销售部门',
                        children: [{
                            id: '221',
                            label: '产品经理',
                        }, {
                            id: '222',
                            label: '销售一部',
                        }, {
                            id: '223',
                            label: '销售二部',
                        }, {
                            id: '224',
                            label: '销售三部',
                        }],
                    },{
                        id: '23',
                        label: '财务部',
                        children: [ {
                            id: '231',
                            label: '财务一部',
                        }, {
                            id: '232',
                            label: '财务二部',
                        }, {
                            id: '233',
                            label: '财务三部',
                        }, {
                            id: '234',
                            label: '财务四部',
                        }, {
                            id: '235',
                            label: '财务五部',
                        }, {
                            id: '236',
                            label: '财务六部',
                        }, {
                            id: '237',
                            label: '财务七部',
                        } ],
                    }]
                },
                    {
                        id: '3',
                        label: '蚂蚁科技有限公司',
                        children: [{
                            id: '31',
                            label: '产品研发部',
                            children:[{
                                id: '311',
                                label: 'java',
                            }, {
                                id: '312',
                                label: 'go',
                            }, {
                                id: '313',
                                label: 'python',
                            }, {
                                id: '314',
                                label: 'php®',
                                isDisabled: true
                            }, {
                                id: '315',
                                label: 'c++',
                                isDisabled: true
                            }]
                        },{
                            id: '32',
                            label: '销售部门',
                            children: [{
                                id: '321',
                                label: '产品经理',
                            }, {
                                id: '322',
                                label: '销售一部',
                            }, {
                                id: '323',
                                label: '销售二部',
                            }, {
                                id: '324',
                                label: '销售三部',
                            }],
                        },{
                            id: '33',
                            label: '财务部',
                            children: [ {
                                id: '331',
                                label: '财务一部',
                            }, {
                                id: '332',
                                label: '财务二部',
                            }, {
                                id: '333',
                                label: '财务三部',
                            }, {
                                id: '334',
                                label: '财务四部',
                            }, {
                                id: '335',
                                label: '财务五部',
                            }, {
                                id: '336',
                                label: '财务六部',
                            }, {
                                id: '337',
                                label: '财务七部',
                            } ],
                        }]
                    }
                ],
                DRHA_EFaultModeTree_value: null,
                DRHA_EFaultModeTree_lables: [],
            }
        },
        created() {
           
        },
        mounted() {
          
        },
        methods: {
            //选中的时候的数组
            nodeSelect(node, instanceId){
                console.log(node, instanceId, 'select')
                this.DRHA_EFaultModeTree_lables.push(node.label);
                console.log(this.DRHA_EFaultModeTree_lables, 'select')
            },
            //删除选中的时候数组
            nodeCancelSelect(node, instanceId){
                console.log(node, instanceId, 'delete')
                for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
                    if(node.label == this.DRHA_EFaultModeTree_lables[i]){
                        this.DRHA_EFaultModeTree_lables.splice(i,1);
                    }
                }
                console.log(this.DRHA_EFaultModeTree_lables, 'delete')
            },
        }
    }
</script>

定义了DRHA_EFaultModeTree_lables数组用来存放选中的记录的数组,后面可以处理自己的逻辑。

Logo

前往低代码交流专区

更多推荐