element-plus + vue3使用el-dropdown配合el-cascader-panel遇到的问题

1,250 阅读1分钟

image.png

版本element-plus:2.2.2 vue:3.2.13

  • cascader组件
<template>
    <el-cascader-panel
        @change="handleCascaderChange" 
        :options="configData" 
        v-model="bindValue" 
        :props="{
            multiple: true,
            expandTrigger: 'hover',
        }" 
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const bindValue = ref();

interface IProps {
    configData: any[];
}

const props = defineProps<IProps>();

function handleCascaderChange() {
    console.log(bindValue.value);
}
</script>
  • 使用cascader组件的父组件
<template>
    <div>
        <el-dropdown trigger="click" v-for="item in COMMON_FILTERS">
            <span>
                <span>{{ item.keyName }}</span>
                <i class="iconfont icon-xiala"></i>
            </span>
            <template #dropdown>
                <!-- 给这个组件随便传递了一个对象属性normalObj -->
                <Cascader :config-data="item.options" :normalObj={} />
            </template>
        </el-dropdown>
</div>
</template>
<script setup lang="ts">
// 配置数据 {keyName:string;options:[{label:string;value:string;children:any[]}]}[]
import { COMMON_FILTERS } from '@/constant/map';
import Cascader from './cascader.vue';
</script>

问题描述:上述代码中,如果给组件Cascader随便传递一个对象类型的属性,那么点击el-cascader-panel选择的时候就需要点击两次才能选中。

解决方式:这样使用封装组件的时候不传递对象类型的属性就可以了。