vue Cascader 级联选择器第一个单选,第二个多选
<el-cascader v-model="youHuiQuanValue" size="mini" :options="options1" :props="props" collapse-tags @change="changeYouHuiQuan"></el-cascader>
props: { multiple: true }, youHuiQuanValue: [], shareScopeEnd: [], options1: [{ value: 1, label: '通用券', }, { value: 2, label: '商品券', children: [ { value: 22, label: '手机' }, { value: 23, label: '电脑' }, { value: 24, label: '电视' }, { value: 25, label: '家电' }, ] }],
changeYouHuiQuan (val) { console.log(val) // 是否与上次的类型相同 let changeFlag = false let changeItem = null if (this.shareScopeEnd.length == 0) { this.youHuiQuanValue = val } else { // 与原数组比对 this.youHuiQuanValue.forEach((item) => { if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同 changeFlag = true changeItem = item } // else if (item[1] != this.shareScopeEnd[0][1]) { // // 一级标签相同但是二级标签不同 // changeFlag = true // changeItem = item // } // else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && this.shareScopeEnd[0][2])) { // changeFlag = true // changeItem = item // } }) } if (changeFlag) { this.youHuiQuanValue = [] this.youHuiQuanValue.push(changeItem) } this.shareScopeEnd = this.youHuiQuanValue },