el-cascader 溢出

el-cascader组件在多选之后，回显的数据太多导致高度溢出的问题可以通过以下两种方法解决：

方法一：
在全局CSS文件中添加以下样式：

.el-cascader__tags {
  height: 100px;
  overflow: scroll;
}

这样设置可以固定el-cascader组件的高度为100px，并在溢出时显示滚动条。

方法二：
在原代码样式中添加以下样式：

.train-tree-cascader {
  height: 500px !important;
}
.train-tree-cascader .el-cascader-panel {
  height: 100% !important;
}
.train-tree-cascader .el-cascader-panel .el-cascader-menu__wrap {
  height: 104% !important;
}

这样设置可以将el-cascader组件的高度固定为500px，并且保持面板和菜单的高度与父容器一致。

相关问题

el-cascader高度溢出

el-cascader的高度溢出问题，可以通过在全局的CSS文件中进行调整来解决。根据提供的代码，可以看出在.el-cascader-menu中设置了高度为200px，而在.el-cascader__tags中设置了高度为100px，并且使用了overflow: scroll来实现滚动效果。为了解决高度变化的问题，可以尝试增加一个固定高度的父容器来包裹.el-cascader__tags，并给该父容器设置一个固定的高度，比如400px。这样，在数据溢出时，就会出现滚动条，而高度不会继续变化。可以尝试在父容器上添加以下样式：
.el-cascader__tags-wrapper {
height: 400px;
overflow: auto;
}
这样就能够实现同时滚动和固定高度的效果，解决el-cascader的高度溢出问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue之 el-cascader实现动态加载问题，高度溢出](https://blog.csdn.net/qq_39835505/article/details/121994214)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [uniapp-cascader](https://download.csdn.net/download/wz_coming/13112332)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue el-cascader所需要的省市区街道联动的数据格式](https://download.csdn.net/download/weixin_41475202/12663454)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

el-cascader如何监听

el-cascader是Element UI库中的一个级联选择器组件，用于实现多级联动选择。要监听el-cascader的选择事件，可以使用v-model指令绑定一个数据变量，并通过watch监听这个变量的变化。

首先，在el-cascader上使用v-model指令将选择的值绑定到一个数据变量上，例如：

<el-cascader v-model="selectedOptions" :options="options"></el-cascader>

其中，`selectedOptions`是一个数组，用于存储选择的值。

然后，在Vue组件中使用watch来监听`selectedOptions`的变化，例如：

watch: {
  selectedOptions: function(newVal, oldVal) {
    // 处理选择变化的逻辑
  }
}

在watch的回调函数中，可以处理选择变化的逻辑，`newVal`表示新的选择值，`oldVal`表示旧的选择值。

这样，当el-cascader的选择发生变化时，watch会自动触发回调函数，从而实现对选择事件的监听。