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