级联选择器有多种应用：
<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：该组件已解决选中节点后弹窗不关闭的问题。
