<template>
<ElCascader
v-model="listQuery.material"
:options="materialList"
:props="materialCascaderProps"
multiple
collapse-tags
collapse-tags-tooltip
clearable
style="width: 260px"
@change="materialChange"
/>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
const materialCascaderProps = { multiple: true }
const cascaderTag = ref(-1)
const listQuery = ref({
effect: '',
})
const materialList = ref([
{
value: 1,
label: '仅是',
children: [
{
value: 0,
label: '优质'
},
{
value: 1,
label: '首发'
},
]
},
{
value: 2,
label: '包含',
children: [
{
value: 0,
label: '优质'
},
{
value: 1,
label: '首发'
},
]
},
])
// 设置级联选择器父级单选,子级多选
const materialChange = (val) => {
val.forEach((v) => {
cascaderTag.value = v[0]
})
let filterd = val.filter((v) => v[0] == cascaderTag.value)
listQuery.value.material = filterd
}
</script>