el-cascader置灰
时间: 2023-06-30 10:20:31 浏览: 61
要将 `el-cascader` 组件置灰,可以通过设置 `:disabled` 属性来实现。例如:
```
<el-cascader :options="options" :disabled="true"></el-cascader>
```
设置 `:disabled="true"` 后,`el-cascader` 组件将变为不可用状态,同时也会被置灰。如果要动态控制 `el-cascader` 的可用状态,可以将 `:disabled` 绑定到一个变量,然后在需要时修改该变量的值即可。
相关问题
el-cascader cascader-input回显
el-cascader 组件的 cascader-input 属性可以用来实现级联选择器的输入框,但是默认情况下,输入框中不会显示已选中的选项。如果需要在输入框中回显已选中的选项,可以通过以下步骤实现:
1. 在 el-cascader 组件中添加 v-model 指令,将选中的值绑定到一个变量上。
2. 在 cascader-input 中添加 :value 属性,将绑定的变量作为输入框的值。
例如:
```
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
>
<el-input
slot="cascader-input"
:value="selectedOptions"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
></el-input>
</el-cascader>
```
其中,selectedOptions 是绑定的变量,options 和 props 是级联选择器的选项和属性配置。
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_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_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)