cascader,选中父节点,不关联子节点。但是选中子节点,关联父节点的案列
于2024-07-31 12:00:35发布
19
<template>
<el-cascader v-model="val" :options="options" :props="props" clearable :show-all-levels="false" @change="change"
collapse-tags ref="cascaderRef" filterable />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const cascaderRef = ref(null);
const val = ref([]);
const props = {
multiple: true,
checkStrictly: true,
emitPath: true
}
const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'feedback',
label: 'Feedback',
},
{
value: 'efficiency',
label: 'Efficiency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
},
{
value: 'top nav',
label: 'Top Navigation',
},
],
},
],
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout',
},
{
value: 'color',
label: 'Color',
},
{
value: 'typography',
label: 'Typography',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio',
},
{
value: 'checkbox',
label: 'Checkbox',
},
{
value: 'input',
label: 'Input',
},
],
},
],
},
]
const change = () => {
const arr = JSON.parse(JSON.stringify(val.value));
const ap: any = document.querySelectorAll('.in-active-path');
val.value = Array.from(new Set(arr.flat()));
setTimeout(() => {
ap[1].click();
}, 0)
}
</script>
<style>
.el-cascader .el-input--default .el-input__inner::placeholder {
font-size: 0 !important;
}
</style>