官网链接: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;
                }
            },

 效果图:

 

Logo

前往低代码交流专区

更多推荐