el-cascader 级联选择器
三级类目一级单选,二三级多选父组件 写法<CheckCascader @change="getSelectList" />getSelectList(data){console.log(data)}子组件写法<template><div style="width:100%"><el-cascaderref="tree"v-model="value":opt
·
三级类目一级单选,二三级多选
- 父组件 写法
<CheckCascader @change="getSelectList" />
getSelectList(data){
console.log(data)
}
- 子组件写法
<template>
<div style="width:100%">
<el-cascader
ref="tree"
v-model="value"
:options="optionsData"
:props="propsInfo"
clearable
collapse-tags
@change="changeLabel"
/>
</div>
</template>
<script>
import { getCategoryAndParentVOList } from '@/api/user/list';
export default {
name:'CheckCascader',
data() {
return {
value: [],
shareScopeEnd: [],
optionsData:[],
propsInfo:{
value: 'id',
label: 'name',
children:'childList',
multiple: true,
// checkStrictly: true
},
level1: false,
level2: false,
}
},
mounted(){
// 获取数据 数据必须满足三级
getCategoryAndParentVOList().then((res) => {
this.optionsData = res.data
});
},
methods: {
changeLabel(val) {
this.level1 = false
this.level2 = false
if (this.shareScopeEnd.length == 0) {
this.value = val
} else {
let arrValue1 = []
let arrValue2 = []
val.forEach((item,index) => {
if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
arrValue1.push(item)
this.level1 = true
} else {
this.level2 = true;
arrValue2.push(item)
}
})
if (this.level1) {
this.value = arrValue1;
} else {
this.value = arrValue2;
}
}
this.shareScopeEnd = this.value
const lastDate=[]
this.value.forEach(item=>{
lastDate.push(item[2])
})
this.$emit('change',lastDate)
}
}
}
</script>
<style lang="less" scoped>
.el-cascader{
width: 100%;
}
</style>
三级类目一二级单选,三级多选
- 父组件 写法
<CheckCascader @change="getSelectList" />
getSelectList(data){
console.log(data)
}
- 子组件写法
<template>
<div style="width:100%">
<el-cascader
ref="tree"
v-model="value"
:options="optionsData"
:props="propsInfo"
clearable
collapse-tags
@change="changeLabel"
/>
</div>
</template>
<script>
import { getCategoryAndParentVOList } from '@/api/user/list';
export default {
name:'CheckCascader',
data() {
return {
value: [],
shareScopeEnd: [],
optionsData:[],
propsInfo:{
value: 'id',
label: 'name',
children:'childList',
multiple: true,
// checkStrictly: true
}
}
},
mounted(){
getCategoryAndParentVOList().then((res) => {
this.optionsData = res.data
});
},
methods: {
changeLabel(val) {
let changeFlag = false
let changeItem = null
if (this.shareScopeEnd.length == 0) {
this.value = val
} else {
// 与原数组比对
this.value.forEach((item) => {
if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
changeFlag = true
changeItem = item
} else if ((!item[1] && this.shareScopeEnd[0][1]) || (item[1] && !this.shareScopeEnd[0][1])) {
changeFlag = true
changeItem = item
} else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
changeFlag = true
changeItem = item
}
})
}
if (changeFlag) {
this.value = []
this.value.push(changeItem)
}
this.shareScopeEnd = this.value
const lastDate=[]
this.value.forEach(item=>{
lastDate.push(item[2])
})
this.$emit('change',lastDate)
}
}
}
</script>
<style lang="less" scoped>
.el-cascader{
width: 100%;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)