el-cascader
时间: 2023-11-07 12:24:32 浏览: 34
Lo siento, como modelo de lenguaje de inteligencia artificial, no tengo suficiente contexto para entender a qué te refieres con "el-cascader". ¿Podrías proporcionar más información o aclarar tu pregunta? Estaré encantado de ayudarte en lo que pueda.
相关问题
el-cascader实例
el-cascader是Element UI库中的一个组件,它是一个级联选择器,用于从多个层级中选择数据。它可以用于选择省市区、商品分类等多层级的数据。
以下是一个el-cascader的实例:
```html
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 选中的值
options: [ // 数据源
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀区',
children: [
{
value: 'zhongguancun',
label: '中关村',
},
{
value: 'wudaokou',
label: '五道口',
},
],
},
{
value: 'dongcheng',
label: '东城区',
children: [
{
value: 'tian************************************************************************************
el-cascader 溢出
el-cascader组件在多选之后,回显的数据太多导致高度溢出的问题可以通过以下两种方法解决:
方法一:
在全局CSS文件中添加以下样式:
```css
.el-cascader__tags {
height: 100px;
overflow: scroll;
}
```
这样设置可以固定el-cascader组件的高度为100px,并在溢出时显示滚动条。
方法二:
在原代码样式中添加以下样式:
```css
.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,并且保持面板和菜单的高度与父容器一致。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.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)
![](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)