Cascader 级联选择器 多选

Cascader 级联选择器 多选
/activity-management-edit

<el-cascader
                      class="cascader"
                      :options="options"
                      :disabled="is_edit"
                      v-model="cascaderActive"
                      @change='cascaderData'
                      :props="props"
                      :show-all-levels="false"
                      clearable></el-cascader>

数据处理

data:[
	 {active_type: "不限",
	  list: [{
	  	id: "-1", active_name: "不限"
	  }]
	 },{
		active_type: "短租活动"
		list: [{
			active_name: "新短租活动"
			active_status: "已结束"
			active_type: "短租活动"
			company: "北京/天津"
			end_time: "1559404799"
			id: "71"
			start_time: "1551369600"
		 }]
	}
]

//处理数据
getChildren(data){
            data.forEach((item,index)=>{
                data[index]={
                    value:`${item.id?item.id:index}`,
                    label:item.active_type,
                    disabled:false,//当为true时可选
                }
                data[index]['children']=[]
                if(item.list.length&&item.list){
                    item.list.forEach((val,i)=>{
                        data[index]['children'].push(
                            {
                            value:val.id,
                            label:val.id==-1?'不限':`活动名称:${val.active_name}\n活动状态:${val.active_status}\n活动时间:${this.formatTable(val.start_time)}至${this.formatTable(val.end_time)}\n活动城市:${val.company}`
                            }
                        )
                    })
                }
            })
            this.options=data
        },
//处理之后
options:[
            {
                value:0,
                label:不限,
                disabled:false,//当为true时可选
                children:[
                    {
                        value:-1,
                        label:不限
                    }
                ]
            },
            {
                value:短租活动,
                label:1,
                disabled:false,//当为true时可选
                children:[
                    {
                        value:71,
                        label:'活动名称:新短租活动\n 活动状态:已结束 \n活动时间:2019-03-01至2019-06-01\n活动城市:北京/天津'
                    }
                ]
            }
        ]
Cascader 级联选择器限制
当为不限时，不可选择其他
当选择其他时不可选择不限
当没有选择时都可选
value 获取到的是层级value是数组因为前期做过处理 所以获取到例如 value[{0,0}]  value[{71,71}]

        // 获取活动id 活动id逗号分隔
        cascaderData(val){
            if(val.length){
                let value=[]
                val.forEach((item)=>{
                    // 当上期参加活动选择不限时，其他活动不可选
                    if(item[1]==-1){
                        this.options.forEach((v)=>{
                            v.children.forEach((i)=>{
                                if(i.value==-1){
                                    v.disabled=false
                                }else{
                                    v.disabled=true
                                }
                            })
                        })
                    }else{
                        // 当上期活动选择是其他活动时，不限不可选择
                        this.options.forEach((v)=>{
                            v.children.forEach((i)=>{
                                if(i.value==-1){
                                    v.disabled=true
                                }else{
                                    v.disabled=false
                                }
                            })
                        })
                    }
                    value.push(item[1])
                    this.formtourist.prev_active_limit=value.join(',')
                })
            }
            if(!val.length){
                // 当取消选择不是不限或者其他活动时，展示都可以选择选项
                this.formtourist.prev_active_limit=''
                this.options.forEach((v)=>{
                    v.children.forEach((i)=>{
                        if(i.value==-1){
                            v.disabled=false
                        }else{
                            v.disabled=false
                        }
                    })
                })
            }
        },

详情进入展示做处理

// 匹配上期参加活动多选id
                this.cascaderActive=[]
                if(activeprev.length){
                    activeprev.forEach((item)=>{
                        value.push(item.id)
                        this.formtourist.prev_active_limit=value.join(',') //数据同步  验证
                        this.options.forEach((items)=>{  //详情进入选中数据展示
                            items.children.forEach((val)=>{
                                if(item.id==val.value){
                                    this.cascaderActive.push([items.value,item.id])
                                }
                            })
                        })
                    })
                }

如果需要清空选择
可以设置this.cascaderActive=[]