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>