el-cascader占满全屏

最新推荐文章于 2024-07-26 09:41:05 发布
最新推荐文章于 2024-07-26 09:41:05 发布
阅读量1k 收藏
点赞数
分类专栏： vue脚手架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35805004/article/details/112986656
版权

在使用el-cascader组件时，发现如果渲染的数据过多时，组件的高度就会占满整个屏幕的高度，而el-cascader组件不会自动加上滚动条；解决办法：
在全局样式中设置：
在这里插入图片描述

ZC97
关注
专栏目录
vue运用之el-cascader组件
日常笔记/总结/系列知识梳理
11-30 995
el-cascader 是 Element UI 的级联选择器组件。以下是一些常见的 el-cascader 问题以及对应的案例代码。
elementui使用el-container，页面撑满
weixin_45958726的博客
11-08 1727
设置前： ` <template> <div class="cont"> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </div> </template> <style> .cont{ height: 100vh; //设置外边盒子
限制 el-select 和 el-cascader 下拉框宽度
最新发布
m0_58256599的博客
07-26 334
加 `popper-class`，设定宽度为 0 ，加选项插槽，设置 `title`因此，需要限制下拉框宽度，选项内容过长则以省略号显示，鼠标悬浮显示完整内容。等下拉选项字符过多时，下拉框会自动边长，有时甚至会超出屏幕宽度，不美观。加 `popper-class` 和 `title` ，设定宽度为 0。
el-card占满整个页面的方法
axiaoxiaoqing的博客
07-03 515
页面的el-card里面有两个组件，其中一个（b组件）是绝对定位，但是el-card仍然给它留了空位。把 a组件高度设为100%也没用；
el-card可点击放到最大（占满屏幕）功能实现(包含退出次数，考试系统可能会使用到，一共四步)
zwjl1017的博客
03-24 1514
v2+element ui占满屏幕功能实现
Cascader 级联选择器 数据过多撑满全屏的问题
qq_42590778的博客
10-17 551
原因：el-cascader默认显示所有列表 解决： 在全局样式表中输入以下代码： .el-cascader-panel{ height: 270px; }
关于elementUI中Cascader 级联选择器高度超过屏幕的问题
weixin_69943276的博客
08-31 973
在elementUI中直接使用Cascader 级联选择器效果跟组件库不一样，数据过多导致菜单选择部分超出了页面，前面的数据没办法看到从而导致了没办法选择。从网上找到了以下解决办法，发布此篇文章只是为了方便自己翻阅。在公共初始化的css样式文件中添加以下代码即可解决。...
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
uniapp-cascader
11-14
《uniapp-cascader：构建灵活的级联选择器》 在移动应用开发领域，uniapp因其跨平台的特性及丰富的组件库，逐渐成为开发者们的首选工具之一。本篇文章将聚焦于uniapp的一个特定组件——uniapp-cascader，一个用于...
element-plus---Cascader三级联动地区选择---json数据
08-19
2. **配置Cascader组件**：在模板中，添加`<el-cascader>`元素，并设置其`options`属性为`areas`，以加载我们的地区数据。还可以根据需求设置其他属性，如`props`（指定各个字段名）、`clearable`（是否可清除选择）...
简单实现elementui的el-container布满全屏
Cdebai的博客
05-19 3万+
简单实现elementui的el-container布满全屏 在使用elementui的布局元素的时候，会遇到一个问题，那就是照着官方文档弄出来的布局元素不能实现满屏。 我们从官方文档拷贝实现的效果如图： 很显然，这不是我们想要的效果，我们要把它布满全屏. 经过我的多次尝试，我找到了一种解决办法，解决代码如下 <style type="text/css"> /* 找到ht...
由于数据过多，Cascader 级联选择器占满全屏解决
weixin_54586234的博客
07-31 633
在global.css全局样式表设置高度即可 .el-cascader-panel{ height: 250px; }
el-card高度撑不开
weixin_44683763的博客
10-12 6779
有时候会遇见el-card高度撑不开的情况，方法一： style="height:600px;overflow-y:auto;overflow-x:hidden;"
element ui的布局el-container布满整个页面
hcm15059080661的博客
05-02 1828
element ui的布局el-container布满整个页面
用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题  组件代码
腾讯全栈-ITCJF
10-30 1万+
用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题  组件代码     &lt;template&gt; &lt;el-carousel :interval="2000" indicator-position="none" id="el-carousel"&gt; &lt;el-carousel-item...
element ui tree树节点数据平面化
m0_37780367的博客
09-02 562
有时候需要对树节点进行增删改查，因此需要快速找到要操作的这个节点。将label,children格式的数据平面化处理后，可以根据id等唯一标识字段快速定位节点，随后对其操作。 数据平面化操作： function GetFlatData(arr1) { arr1=arr1||[]; var array = []; $.each(arr1, function (i, item) { ...
Element-ui中Cascader组件数据太长显示不全的解决方案
m0_37446642的博客
03-11 2544
如下图，影响页面效果。 解决方案：给.el-cascader-panel指定高度，在全局css中根据需要设置就行了~~ .el-cascader-panel { height: 300px!important; } 如图↓
Element-UI 使用心得之el-card
热门推荐
圣人男的博客
03-15 7万+
el-card 是Element-UI 内置的卡片组件，使用起来很方便，但是对Vuejs和html 不是精通的话，根据自己的要求布局，会出现自己的小困惑，必须添加垂直居中，按照CSS 布局设置，总是 不起作用，与其费力搜寻办法，不如自己简单白痴的去设置一下 1.鼠标放上去有一个动画效果： .el-card { min-width: 380px; margin-rig...
el-cascader后端返回的是el-cascader的最后一级的value，然后想拿el-cascader对应的label回显到el-table里
09-14
根据提供的代码，可以看出el-cascader组件的v-model属性存储了el-cascader选择的值，而el-cascader的options属性存储了级联选择器的选项数据。如果你想要将el-cascader的label回显到el-table中，你可以使用el-table的slot-scope属性来获取el-cascader选中的值，并在el-table中使用对应的label进行回显。具体的步骤如下: 1. 在el-table的列定义中，使用slot-scope属性来获取el-cascader选中的值。 2. 使用v-for指令遍历el-table的列定义，将el-cascader的label回显到el-table中。 以下是示例代码: ```html <el-table :data="tableData"> <el-table-column v-for="column in columns" :label="column.label" :key="column.prop"> <template slot-scope="scope"> <span v-if="column.prop === 'cascader'">{{ getLabelFromCascader(scope.row.cascader) }}</span> <span v-else>{{ scope.row[column.prop }}</span> </template> </el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { cascader: ['1', '2'], name: 'John' }, { cascader: ['1', '3'], name: 'Jane' }, ], columns: [ { label: 'Cascader', prop: 'cascader' }, { label: 'Name', prop: 'name' }, ], options: [ { Id: '1', Name: '成都', Childlist: [ { Id: '2', Name: '济南' }, { Id: '3', Name: '上海' }, ], }, ], } }, methods: { getLabelFromCascader(value) { const labels = [] let options = this.options for (const val of value) { const option = options.find(opt => opt.Id === val) labels.push(option.Name) options = option.Childlist } return labels.join(' > ') }, }, } ``` 在上面的示例代码中，我们使用了getLabelFromCascader方法来获取el-cascader选中值对应的label。通过遍历options数据，我们可以逐级获取每个选中值的label，并使用join方法将它们连接起来。最后，将getLabelFromCascader方法应用于el-table的列定义中的slot-scope中，以回显el-cascader的label到el-table中。 希望这可以帮助到你！如果你还有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值