element级联选择器多选，父子关联和不关联之间切换，及删除空数组

element级联选择器多选，父子关联和不关联之间切换，及删除空数组

一、级联选择器组件

<el-cascader v-if="column.type === 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 => {
                    if (typeof v == 'object') {
                        arr = [...arr, ...v]
                    }
                })
                const set = new Set(arr);
                this.newGoodsClassIdList = [...set]
              // this.formModel[column.prop.replace('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 = document.createElement('ul');
                    el.className = 'el-cascader-menu__list';
                    el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;';
                    el.innerHTML = `<div style="display: flex;align-items: center;padding:5px 10px">
                  <input type="checkbox" checked id="checkId"/><span>全选span>div>`
                    popper.appendChild(el);
                    const inputEl = document.getElementById('checkId')
                    inputEl.onclick = function() {
                        that.formModel[column.prop] = []
                        if (this.checked) {
                            that.cascaderProp.checkStrictly = false
                            that.cascaderProp.emitPath = true//传完整的父子节点路径
                        } else {
                            that.cascaderProp.checkStrictly = true
                            that.cascaderProp.emitPath = false//只传最后节点的路径
                        }
                        that.getSelectData(column)
                        that.$forceUpdate()
                    };
                }
            }
        },

注意：这里的数据如果后端返回的最后一个child是空数组，我们需要把这个空数组删除，不然选中后输入框数据出不来

// 删除空子级
      deleteEmptyChild(arr = []){
        arr.map(v=>{
          if(v.children && v.children.length > 0){
            return this.deleteEmptyChild(v.children)
          }
          delete v.children
        })
      },