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=[]