vue中使用treeselect

官网链接:https://vue-treeselect.js.org/

1.安装依赖:

npm install --save @riophae/vue-treeselect

2.在使用在插件的页面引入:

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

 html:

<el-form-item label="部门/公司:" prop="concactId">
      <treeselect
            class="xb-input-3"
            v-model="userdata.concactId"
            placeholder="请选择部门/公司"
            :defaultExpandLevel='Infinity'
            @select="selectedTree"
            :options="options"
            :noChildrenText="null"
       >
       </treeselect>
</el-form-item>
:defaultExpandLevel='Infinity':默认展开所有子菜单
components: {Treeselect},引入组件
//去除返回值为null的情况;
            deleteNullChildren(option){
                if(!option.children || option.children.length == 0){
                    delete option.children;
                } else {
                    let options = option.children;
                    if(options && options.length > 0){
                        for(let i = 0; i< options.length; i++){
                            let optionChild = options[i];
                            this.deleteNullChildren(optionChild);
                        }
                    }
                }
            },
            //获取部门信息;
            async getDepartment(){
                const response = await getDepartment(this);
                const data = response.data;
                if(response.code == 0){
                    this.options = JSON.parse(JSON.stringify(data.allDepartment).replace(/name/g, "label").replace(/nextDir/g, "children").replace(/concactId/g, "id"));
                    console.log("this.options");
                    console.log(this.options);
                    let options = this.options;
                    if(options && options.length > 0){
                        for(let i = 0; i< options.length; i++){
                            let optionChild = options[i];
                            this.deleteNullChildren(optionChild);
                        }

                    }
                    this.options = options;
                }
            },

 效果图:

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值