版本: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选择的时候就需要点击两次才能选中。
解决方式:这样使用封装组件的时候不传递对象类型的属性就可以了。