美文网首页
vue Cascader 级联选择器第一个单选,第二个多选

vue Cascader 级联选择器第一个单选,第二个多选

作者: 佑安丶 | 来源:发表于2022-12-21 10:13 被阅读0次

<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    },

相关文章

网友评论

      本文标题:vue Cascader 级联选择器第一个单选,第二个多选

      本文链接:https://www.haomeiwen.com/subject/fecmqdtx.html