element级联选择器多选，⽗⼦关联和不关联之间切换，及删除空数组element级联选择器多选，⽗⼦关联和不关联之间切换，及删除空数组
⼀、级联选择器组件
<el-cascader v-if="pe === columnType.cascaderMultiple"
v-model="formModel[column.prop]"
:options="column.data"
@change="valueChangeMultiple($event,column)"
@visible-change="v => visibleChange(v, 'cascader', column)"
ref="cascader"
:clearable="false"
collapse-tags
:props=cascaderProp
>
</el-cascader>
⼆、data数据（:props=cascaderProp）
cascaderProp:{
checkStrictly: false,
expandTrigger: 'click',
multiple:true,
emitPath:true,
},
三、method⽅法
1.@change=“valueChangeMultiple($event,column)”
/
/ 多选级联change事件
valueChangeMultiple(val, column) {
if (!this.cascaderProp.checkStrictly) {
// ⼆维数组合并去重，这⾥后端需要⼀维数组，所以做了转化
let arr = []
val.forEach(v => {
typeof arrayif (typeof v == 'object') {
arr = [...arr, ...v]
}
})
const set = new Set(arr);
// this.formModel[place('Cascader', '')] = [...set]
}
if (column.hidden || column.disabled) return;
column.change && column.change(this.formModel);
},
2.@visible-change=“v => visibleChange(v, ‘cascader’, column)”
visibleChange(visible, refName, column) {
let that = this
if (visible) {
const ref = this.$refs[refName][0];
let popper = ref.$refs.popper;
if (popper.$el) popper = popper.$el;
if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
const el = ateElement('ul');
el.className = 'el-cascader-menu__list';
el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;';
el.innerHTML = `<div >
<input type="checkbox"checked id="checkId"/><span>全选</span></div>`
popper.appendChild(el);
const inputEl = ElementById('checkId')
that.formModel[column.prop] = []
if (this.checked) {
that.cascaderProp.checkStrictly = false
itPath = true//传完整的⽗⼦节点路径
} else {
that.cascaderProp.checkStrictly = true
itPath = false//只传最后节点的路径
}
that.$forceUpdate()
};
}
}
},
注意：这⾥的数据如果后端返回的最后⼀个child是空数组，我们需要把这个空数组删除，不然选中后输⼊框数据出不来
// 删除空⼦级
deleteEmptyChild(arr = []){
arr.map(v=>{
if(v.children && v.children.length > 0){
return this.deleteEmptyChild(v.children)
}
delete v.children
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。