el-select 放置在 el-radio 组件当中,导致 el-select 点击时无法展开
时间: 2024-05-24 21:08:26 浏览: 18
可能是因为 el-radio 组件的默认行为会阻止 el-select 组件的点击事件冒泡,导致无法展开。您可以尝试在 el-radio 上添加 @click.stop.prevent 事件来防止默认行为并停止事件冒泡。例如:
```
<el-radio @click.stop.prevent>
<el-select ...>
...
</el-select>
</el-radio>
```
相关问题
el-select显示悬浮窗
要让el-select显示悬浮窗,可以使用el-cascader组件,它可以实现级联选择,也可以显示悬浮窗。具体实现方法如下:
1. 在el-select中使用el-cascader组件,设置options属性为一个数组,数组中每个元素为一个对象,该对象包含label和value属性,分别表示选项的文本和值。
2. 设置el-cascader的show-all-levels属性为true,这样就可以显示悬浮窗。
3. 设置el-cascader的expand-trigger属性为'hover',这样就可以在鼠标悬停时展开悬浮窗。
例如,以下代码实现了一个带有悬浮窗的el-select:
```
<template>
<el-select v-model="value" placeholder="请选择">
<el-cascader
:options="options"
:show-all-levels="true"
:expand-trigger="'hover'"
></el-cascader>
</el-select>
</template>
<script>
export default {
data() {
return {
value: '',
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'fankui',
label: '反馈',
},
{
value: 'xiaolv',
label: '效率',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航',
},
{
value: 'dingbudaohang',
label: '顶部导航',
},
],
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字体',
},
{
value: 'icon',
label: 'Icon 图标',
},
{
value: 'button',
label: 'Button 按钮',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 单选框',
},
{
value: 'checkbox',
label: 'Checkbox 多选框',
},
{
value: 'input',
label: 'Input 输入框',
},
{
value: 'input-number',
label: 'InputNumber 计数器',
},
{
value: 'select',
label: 'Select 选择器',
},
{
value: 'cascader',
label: 'Cascader 级联选择器',
},
],
},
],
},
],
};
},
};
</script>
```
el-select提交后取消选种
根据提供的引用内容,el-select提交后取消选种的操作可以通过以下方式实现。在代码中,当点击el-select选项时,会触发getCurrentRow方法。在该方法中,如果selectRadio已经有值且与当前选中的选项相同,则将selectRadio置为空,同时将forbidden设置为false,然后通过setTimeout将forbidden重新设置为true。最后,通过$emit方法将回传数据清除。这样就实现了el-select提交后取消选种的功能。\[2\]
#### 引用[.reference_title]
- *1* [vue中实时筛选el-option的内容](https://blog.csdn.net/m0_53912016/article/details/121160027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [element-UI实现table表格单选及单选点击取消选中](https://blog.csdn.net/weixin_43953518/article/details/116595854)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue.js element-ui select选择器 选中对象](https://blog.csdn.net/wangjun5159/article/details/112566080)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)