初次接触SelectTree组件

项目中的需求

1、下拉列表需要加载树目录

2、数据较大需要以懒加载

3、二次修改时需要通过后端返回的id和name来展示

前言

原本项目中使用element-ui来完成，但发现el-cascader无法完美的实现预想中的效果。所以选择到了SelectTree组件

具体实现步骤

下载SelectTree

通过npm命令下载SelectTree

npm install --save @riophae/vue-treeselect

将SelectTree引入项目

1、引入的第一项时为了可以正常使用SelectTree组件

2、引入第二项是为了后续使用acttion来进行判断加载子级

3、引入第三项是SelectTree的css样式文件

import treeselect from "@riophae/vue-treeselect"
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect/"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

注册SelectTree组件

components: { treeselect }

现在可以使用SelectTree组件了

treeId：选项框双向绑定的值

options：下拉列表选择项

loadOptions：加载子集

normalizer：设置默认值

<treeselect
    v-model="treeId"
    :options="options"
    :load-options="loadOptions"
    :normalizer="normalizer"
    noChildrenText="无子项目"
/>

与标签对应的逻辑代码

属性

fakeData：用于首次进入页面模拟请求返回的的数据

defaultLabel：模拟请求返回的默认label

方法

setTreeId：请求返回的默认id值（设置默认的value）

getOptions：首次进入页面，获取可选择的一级列表

loadOptions：展开下级菜单获取下级菜单数据

        action：当前操作方式

        parentNode：父节点数据

        callback：数据返回

normalizer：设置默认的label

const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
export default {
    name: 'TreeSelectDemo',
    components: { treeselect },
    data(){
        return {
            treeId: null,
            options: [],
            fakeData: [ {
                id: 'success',
                label: 'With children',
                children: null,
            }, {
                id: 'no-children',
                label: 'With no children',
                children: null,
            }, {
                id: 'failure',
                label: 'Demonstrates error handling',
                children: null,
            } ],
            defaultLabel: 'With children'
        }
    },
    mounted(){
        this.getOptions()
        this.setTreeId()
    },
    methods: {
        setTreeId(){
            setTimeout(() => {
                this.treeId = 'success'
            }, 2000);
        },
        /**
         * 首次进入页面加载下拉框中1及数据
         */
        getOptions(){
            setTimeout(() => {
                this.options = this.fakeData
                console.log(this.options)
            }, 2000);
        },
        /**
         * 逐级加载列表树
         */
        loadOptions({action, parentNode, callback}){
            if(action === LOAD_CHILDREN_OPTIONS){
                switch (parentNode.id) {
                    case 'success': {
                        // 模拟请求
                        simulateAsyncOperation(() => {
                            parentNode.children = [ {
                                id: 'child',
                                label: 'Child option',
                            } ]
                            callback()
                        })
                        break
                    }
                    case 'no-children': {
                        simulateAsyncOperation(() => {
                            parentNode.children = []
                            callback()
                        })
                        break
                    }
                    case 'failure': {
                        simulateAsyncOperation(() => {
                            callback(new Error('Failed to load options: network error.'))
                        })
                        break
                    }
                    default: /* empty */
                }
            }
        },
        /**
         * 设置默认值
         */
        normalizer(node){
            console.log('node', node)
            if(!node.label){
                if(this.defaultLabel){
                    node.label = this.defaultLabel
                }
            }
        }
    }
}

注意

1.当设有默认值时不使用normalizer初始化默认label会出现unknown的情况

2、v-model="treeId"双向绑定的值在没有默认值时设为null，否则也会出现unkown的情况

3、没有获取子级的时候将children设置为null 

更多需求大家请前往官网查看：

Vue-Treeselect