一、效果图
二、代码如下
可封装为公用组件 全局引入使用
<template><div class="wrap-box"><div class='cascade-1231' style="width:300px"><el-cascader class='cascader' :options='options' :props='props' clearable :popper-class="'cascade-hide'"@change='handleChange' v-model="valTemp" ref='cascade'><!-- <template slot-scope="{ node, data }"><span>{{ data.label }}</span></template> --></el-cascader></div></div></template><script>
export default {props: {optionsList: {type: Array,default: function () {return []}},val: {type: Array,default: function () {return []}},},watch: {optionsList: {deep: true,handler(news, olds) {this.options = news;},},val: {deep: true,handler(news, olds) {this.preValue = news;},}},data() {return {valTemp: [],props: { multiple: true, expandTrigger: 'click' },options: [{value: 1,label: '北京',children: [{value: 3,label: '故宫'}, {value: 4,label: '天安门'}, {value: 7,label: '颐和园'}]}, {value: 2,label: '南京',children: [{value: 5,label: '秦淮河'}, {value: 6,label: '鸡鸣寺'}]}],preValue: []}},mounted() {this.valTemp = this.val;this.preValue = this.val;// 封装组件时 可由父组件传入// this.options = this.optionsList; },methods: {handleChange(val) {if (this.preValue.length > 0 && val.length > this.preValue.length) {let newIndex;let i = 0, j = 0;while (i < val.length && j < this.preValue.length) {if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) {i++;j++;} else {//添加在中间的情况newIndex = i;break;}}//添加在末尾的情况if (j === this.preValue.length) {newIndex = i;}let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);if (delIndex >= 0) {// 取消选择的节点let cancelIndex;for (let i = 0; i < this.options.length; i++) {if (this.options[i].value === val[delIndex][0]) {for (let j = 0; j < this.options[i].children.length; j++) {if (this.options[i].children[j].value === val[delIndex][1]) {cancelIndex = j;break;}}break;}}this.$nextTick(() => {let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板let liId = document.getElementById(panelId + '-' + cancelIndex);liId.children[0].click();})val[delIndex] = '';val = val.filter(item => item !== '');}}this.preValue = val;this.$emit('getVal', this.preValue)}}
};
</script><style lang='scss' scoped>.wrap-box{/* background: #efefef; */background: rgba(255,255,255,0.70);height: 300px;padding:30px;}.cascade-1231 {width: 100%;backgroung:#efefef;.title {display: block;margin-bottom: 20px;}.cascader {width: 100%;height: 28px;line-height: 28px;.el-input {.el-input__inner {// width: 362px;height: 28px !important;line-height: 28px !important;box-sizing: border-box;}}.el-cascader__tags {display: flex;flex-wrap: nowrap;overflow-y: overlay;margin-left: 2px;}.el-cascader__tags::-webkit-scrollbar {width: 0;height: 3px;}/*定义滚动条轨道 内阴影+圆角*/.el-cascader__tags::-webkit-scrollbar-track {background-color: rgba(186, 203, 227, 0.3);}/*定义滑块 内阴影+圆角*/.el-cascader__tags::-webkit-scrollbar-thumb {background-color: #B3C2D7;}}}
</style>
<style lang="scss">
.cascader {.el-input {.el-input__inner {// width: 362px;height: 28px !important;line-height: 28px !important;box-sizing: border-box;}}
}.cascade-hide {.el-cascader-menu:first-of-type {.el-cascader-node {.el-checkbox {display: none;}}}.el-cascader-menu:nth-child(2) {.el-cascader-node {.el-checkbox {.el-checkbox__inner {border-radius: 50%;}}}}
}
</style>三、寄语
2024年的列车即将到达终点
携带好行囊 奔赴旅途的下一场
2025我来了！！！！！！
希望2025年：
“笑一笑就灿烂
唱一句歌就舒展
收集一点一滴小美满
都是幸福的花样”
