点击el-cascader与tags联动

<el-cascader v-model="queryData.jglx" :options="zclxOption" :props="zclxProps"
             :show-all-levels="false" clearable
             placeholder="请选择"
             ref="jglxRef"
             @change="handleJglxChecked"
></el-cascader>

js部分

handleJglxChecked(event) {
  console.log('handleJglxChecked event:', event);
  //获取所有选中节点的label
  this.$nextTick(() => {
    const labelList = this.$refs.jglxRef.getCheckedNodes().map(item => {
      return item.label
    })
    labelList.map(label => {
      const index = this.tags.findIndex(t => {
        return t === `机构类型:${label}`;
      })
      if (index === -1) {
        this.tags.push(`机构类型:${label}`)
      }
    })
    //判断啥时候删除
    //要不把tags里面的值提出来,如果里面的value不在 labelList 的话就删除
    const jglxTags = this.tags.filter(item => {
      return item.indexOf('机构类型:') > -1;
    }).map(tag => {
      return tag.substring(tag.indexOf(':') + 1);
    })
    const compare = this.getArrDifference(labelList, jglxTags)
    if (compare.length > 0) {
      const delIndex = this.tags.findIndex(t => {
        return t === `机构类型:${compare[0]}`;
      })
      this.tags.splice(delIndex, 1)
    }
  })
},
//对比两个数组的不同
getArrDifference: function (arr1, arr2) {
  return arr1.concat(arr2).filter(function (value, i, arr) {
    return arr.indexOf(value) === arr.lastIndexOf(value);
  })
},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值