Vue Eelement-UI 组件二次封装（三）：Cascader 级联选择器

级联选择器有多种应用：

<template lang="html">
// slot 插槽 修改选择器内部样式
    <div class="block" :title="title">
        <el-cascader
            ref="cascader"
            v-model="selectedOptions"
            :options="options"
            :props="props"
            :clearable="clearable"
            :disabled="disable"
            :filterable="filterable"
            collapse-tags
            @change="handleChange"
            <span class="span-ellipsis" slot-scope="{node,data}">
                <span :title="node.label">{{node.label}}</span>
            </span>
        </el-cascader>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                node: '',//返回当前选中节点
                title: ''
            }
        },
        // 计算属性用于回显
        computed:{
            selectedOptions:{
                get(){
                    return this.$attrs.selectedOptions || []
                },
                set(){}
            },
            options(){
                return this.$attrs.options || []
            },
            //可清空
            clearable(){
                return this.$attrs.clearable || false
            },
            // 可禁用
            disable(){
                return this.$attrs.disable || false
            },
            // 可多选
            filterable(){
                if(this.$attrs.filterable === false){
                    return false;
                } else {
                    return true
                }
            },
            // 可自定义配置props属性
            props(){
                if(this.$attrs.props){
                    return this.$attrs.props
                } else {
                    return {checkStrictly: true}
                }
            }
        },
        watch:{
    		// 单选时，修改节点后直接关闭窗口
            selectedOptions(){
                if(this.filterable){
                    this.$refs.cascader.toggleDropDownVisible(false) //监听值发生变化就关闭它
                }
            }
        },
        methods: {
            handleChange(value) {
                // 可搜索输入无法获取节点
                if(this.$refs.cascader.getCheckedNodes()[0]){
                    this.node = this.$refs.cascader.getCheckedNodes()[0].data;
                }
                this.$emit('toChangeSelection',value)
            },
        },
    }
</script>
<style lang="css" scoped>
	// 定义最大宽度及超出样式
    .span-ellipsis {
        /*width: 100%;*/
        max-width: 350px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*display: block;*/
    }
</style>

全局调用样例：

<new-cascade @toChangeSelection="changeAssetTypeList" :selectedOptions="assetTypeId" :options="assetTypeList"
                                     :props="{checkStrictly:false,emitPath:false}" style="width: 174px" :clearable=true></new-cascade>

其中参数如下：

        data(){
            return {
                assetTypeId: null,
                assetTypeList: [],
            }
        },
        methods:{
            changeAssetTypeList(val){
                this.assetTypeId = val;
            }
        }

其中list数据格式如下

此封装可实现级联的单选复选等多种功能，可基本满足所有需求，另外可根据自己的需求再添加新的props属性。

ps：该组件已解决选中节点后弹窗不关闭的问题。