el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。

简介: el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。

html

<!-- 一级栏目 -->
<div class="one_column">
    <span :active="curTypeValue === 0" @click="clickType({ value: 0 })">全部</span>
    <span v-for="(a, i) in types" :key="i" :active="curTypeValue === a.value" @click="clickType(a)">{{
        a.label }}</span>
</div>
<!-- 子集级联菜单 -->
<div class="crumbs">
    <el-cascader 
        v-model="curPathValue" 
        :popper-class="'type-cascader'" 
        :placeholder="'输入关键词'"
        :props="{ expandTrigger: 'hover', checkStrictly: false, multiple: true }"
        :options="options" 
        :separator="' > '" 
        @change="changeCascader" 
        filterable 
        clearable>
        <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf">({{ data.children.length }})</span>
        </template>
    </el-cascader>
</div>

script

<script>
export default {
    data(){
        return{        
            // 一级栏目
            curTypeValue: 0,
            types: [
            { label: "一级栏目1", value: 1 },
            { label: "一级栏目2", value: 2 },
            { label: "一级栏目3", value: 3 },
            { label: "一级栏目4", value: 4 },
            { label: "一级栏目5", value: 5 },
            { label: "一级栏目6", value: 6 },
            { label: "一级栏目7", value: 7 },
            { label: "一级栏目8", value: 8 },
            { label: "一级栏目9", value: 9 },
            ],
            // 子级级联菜单
            curPathValue: 0,
            options: [
            {
                "value": 1,
                "label": "一级栏目1",
                "children": [
                    {
                        "label": "子级栏目1-1",
                        "value": "1-1"
                    },
                    {
                        "label": "子级栏目1-2",
                        "value": "1-2"
                    },
                    {
                        "label": "子级栏目1-3",
                        "value": "1-3"
                    },
                    {
                        "label": "子级栏目1-4",
                        "value": "1-4"
                    },
                    {
                        "label": "子级栏目1-5",
                        "value": "1-5"
                    },
                    {
                        "label": "子级栏目1-6",
                        "value": "1-6"
                    }
                ]
            },
            {
                "value": 2,
                "label": "一级栏目2",
                "children": [
                    {
                        "label": "子级栏目2-1",
                        "value": "2-1"
                    },
                    {
                        "label": "子级栏目2-2",
                        "value": "2-2"
                    }
                ]
            },
            {
                "value": 3,
                "label": "一级栏目3",
                "children": [
                    {
                        "label": "子级栏目3-1",
                        "value": "3-1",
                        "children": [
                            {
                                "label": "子级栏目3-1-1",
                                "value": "3-1-1",
                                "children": [
                                    {
                                        "label": "子级栏目3-1-1-1",
                                        "value": "3-1-1-1"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "value": 4,
                "label": "一级栏目4",
                "children": [
                    {
                        "label": "子级栏目4-1",
                        "value": "4-1"
                    },
                    {
                        "label": "子级栏目4-2",
                        "value": "4-2"
                    },
                    {
                        "label": "子级栏目4-3",
                        "value": "4-3"
                    }
                ]
            },
            {
                "value": 5,
                "label": "一级栏目5",
                "children": [
                    {
                        "label": "子级栏目5-1",
                        "value": "5-1"
                    }
                ]
            },
            {
                "value": 6,
                "label": "一级栏目6",
                "children": [
                    {
                        "label": "子级栏目6-1",
                        "value": "6-1"
                    },
                    {
                        "label": "子级栏目6-2",
                        "value": "6-2"
                    }
                ]
            },
            {
                "value": 7,
                "label": "一级栏目7",
                "children": [
                    {
                        "label": "子级栏目7-1",
                        "value": "7-1"
                    },
                    {
                        "label": "子级栏目7-2",
                        "value": "7-2"
                    }
                ]
            },
            {
                "value": 8,
                "label": "一级栏目8"
            },
            {
                "value": 9,
                "label": "一级栏目9"
            }
            ],    
        }
    },
    created() {
        this.clickType({ value: 0 });//默认全部选中
    },
    methods: {
        clickType(d) {
            this.curTypeValue = d.value;
            this.chooseFirstLevelChildren(this.curTypeValue);
        },
        // 递归获取所有子级value的合集数组
        digui_cascader_children(fathers = [], children) {
            let r = [];
            let _digui = (fathers, children) => {
                children.forEach((v, i, ar) => {
                    let cur_fathers = fathers.concat(v.value)
                    if (v.children && v.children.length) {
                        _digui(cur_fathers, v.children)
                    } else {
                        r.push(cur_fathers)
                    }
                });
            }
            _digui(fathers, children)
            return r;
        },
        // 选择一级类目所有子级
        chooseFirstLevelChildren(d) {
            if (d == 0) {
                this.curPathValue = this.digui_cascader_children([], this.options);
            } else {
                let arr = this.options.find(v => v.value == d);
                this.curPathValue = this.digui_cascader_children([d], arr.children);
            }
            console.log('当前子级选中项(method)', JSON.stringify(this.curPathValue, null, 2));
        },
        // 改变级联菜单选中项
        changeCascader(d) {
            this.curTypeValue = [...new Set(d.map(v => v[0]))];
            console.log('当前一级选中项(event)', this.curTypeValue);
        },
    },
}
</script>

style

<style lang="scss" scoped>
.one_column {
    span {
        margin-right: 10px;
        font-size: 14px;
        box-sizing: border-box;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: .382s;
        &[active],
        &:hover {
            color: #a50082;
            background-color: #f5f5f5;
        }
    }
}
.crumbs {
    box-sizing: border-box;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    display: flex;
    align-items: center;
    &>span {
        flex-shrink: 0;
        margin-right: 10px;
    }
    >>>.el-cascader {
        flex-grow: 1;
        .el-input--suffix input::-webkit-input-placeholder {
            color: white;//消除placeholder重影
        }
        .el-cascader__tags {
            max-height: 30px;
            overflow-y: auto;
            /*滚动条轨道*/
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
                background: #00000011;
            }
            /*滚动条滑块*/
            &::-webkit-scrollbar-thumb {
                border-radius: 8px;
                background: #00000033;
            }
            /*移入滑块*/
            &::-webkit-scrollbar-thumb:hover {
                background: #00000055;
            }
            /*拐角处*/
            &::-webkit-scrollbar-corner {
                background: none;
            }
        }
    }
}
</style>
<style lang="scss">
//级联菜单下拉框样式
.type-cascader {
    .el-cascader-menu__wrap {
        height: fit-content !important;
        // 勾选了的选项就是加粗高亮显示
        label.el-checkbox.is-checked+span {
            color: #a50082;
            font-weight: bold;
        }
    }
}
</style>


相关文章
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
375 0
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
613 1
element中el-cascader级联 下拉选择-可单独多选(整理)
element中el-cascader级联 下拉选择-可单独多选(整理)
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1614 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
|
2月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
69 0
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
92 0
|
5月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
277 1
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
703 3
|
5月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
56 1