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>
