element ui 组件使用笔记（二）

本文主要为通过element UI 实现类似cascader的组件，element cascader 组件数据结构遵循严格的树级数据结构，但是有时业务可能不会有此结构数据，在此先上图：

此结构主要涉及到三个element 组件，popover,input,scrollbar

<template>
    <div class="ui-rule-params widthX120">
        <el-popover ref="paramsPop" popper-class="rule-params-popover" placement="bottom-start" width="100%" trigger="click">
            <el-input v-model="paramString" size="small" placeholder="请选择" readonly slot="reference"></el-input>
            <div class="rule-params-wrapper">
                <div class="rule-params-level level1">
                    <el-scrollbar vertical :native="false" :noresize="true">
                        <div class="rule-params-item" v-for="item in groups" :key="item.name" @click="changeGroup(item)">
                            <span>{{item.name}}</span>
                            <i v-if="item.items" class="el-icon-arrow-right"></i>
                        </div>
                    </el-scrollbar>
                </div>
                <div v-if="currentGroup" class="rule-params-level level2">
                    <el-scrollbar vertical :native="false" :noresize="true">
                        <div class="rule-params-item" v-for="item in resources" :key="item._id" @click="queryMore(item)">
                            <span>{{item.name}}</span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </el-scrollbar>
                </div>
                <div v-if="currentResource" class="rule-params-level level3" v-loading="level3Loading">
                    <el-scrollbar vertical :native="false" :noresize="true">
                        <div class="rule-params-item" :class="{'is-active':currentParam._id === item._id}" v-for="item in params" :key="item._id" @click="changeParams(item)">
                            <span>{{item.label}}</span>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </el-popover>
    </div>
</template>

.rule-params-popover {
    overflow: hidden;
    .rule-params-wrapper{
        width:100%;
        overflow: hidden;
        display: flex;
        .rule-params-level{
            width:200px;
            max-height:260px;
            overflow: hidden auto;
            .el-scrollbar{
                height:240px;
            }
            .rule-params-item{
                width:inherit;
                height:36px;
                display:flex;
                align-items: center;
                justify-content: space-between;
                padding:0 10px;
                cursor: pointer;
                &.is-active{
                    background-color: lightblue;
                }
            }
        }
    }
}

可以看出利用flex布局，加上弹窗及滚动组件，可以动态切换选中数据，但是element UI 的cascader组件选中后是不会关闭弹窗的，这里需要处理一下，利用ref进行处理

this.$refs.paramsPop.$refs.popper.style.display = 'none';

手工！！！