element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框、table列表内容显示不全解决方式
对于Transfer 穿梭框中的文字过长隐藏问题处理:
1.实现效果:
解决方式;
1.
<el-row :gutter="30"><el-col :span="24" class="input-box"><el-form-item label-width="70px"><el-transfer id="transfer" :titles="['待选监管银行', '已选监管银行']" :props="{ key: 'jgyhxlbh', label: 'jgyhxlmc' }"filterable filter-placeholder="请输入银行名称" v-model="form.transferValue" :data="transfer" @change="checkSel":render-content="renderFunc"></el-transfer></el-form-item></el-col></el-row>
js
renderFunc(h, option) {return <span title={option.jgyhxlmc}>{option.jgyhxlmc}</span>;},
2.改变穿梭框的宽度,在工程中全文搜索.el-transfer-panel,找到定义这个类的地方,修改宽度。
<style>
#transfer .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {font-size: 13px !important;
}
</style>
对于table表格中的文字过长隐藏问题处理:
<el-table-column label="项目地址" align="center" prop="xmwz" min-width="150" :show-overflow-tooltip='true'>
.el-tooltip__popper {max-width: 20%;
}.el-tooltip__popper,
.el-tooltip__popper.is-dark {background: #f5f5f5 !important;color: #303133 !important;
}
element ui中穿梭框等列表文字显示过长隐藏问题处理相关推荐
- Element UI 自定义穿梭框的数据项
文章目录 需求 官网说明 实现效果 具体步骤 附加需求:调节穿梭框高宽度 需求 穿梭框中显示的内容是包含多个字段的数据(把表格的几个字段在穿梭框中展示)以及修改相应的样式,查看 Element UI ...
- 在Element UI中表格根据数据动态变化显示表格的内容
需求 对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
- element ui中select 下拉选择文字输入筛选
未修改代码前效果 选择框中不可编辑 如图:加入 filterable allow-create default-first-option 代码如下 <template><div> ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
- easyui前端实现多选框_前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
- 前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
最新文章
- SpringBoot之配置嵌入式Servlet容器
- 如何从0到1搭建电商促销系统?
- DeepFM调参总结
- 《机器人学导论--Join J.Craig》第一章 绪论
- C++ 面向对象与面向过程的区别与联系
- 一步步实现SDDC-NSX MGR安装和主机准备
- 痛苦的vsftpd配置
- 5个让IT开发效率提高200%的工具,最后一个很实用,你用过几个
- 20款开源搜索引擎介绍与比较
- STM32F103基于固件库创建工程模板
- Python学习笔记-2017.5.4thon学习笔记-2017.5.22
- 系列之FIRST——跑酷小游戏:关卡+BOSS+技能版
- 华硕笔记本安装Ubuntu20.04
- 带你了解ICCV、ECCV、CVPR三大国际会议
- 初看SOA:SOA是什么?
- 只要35+的程序员,招聘广告开始玩噱头?
- 七天学会html5和css3之重点标签介绍(20)
- 链表逆序(反转链表)
- 【Guacamole中文文档】二、用户指南 —— 4.代理Guacamole
- 计算机网络>时延、时延带宽积、往返时间RTT、信道利用率
热门文章
- 宜昌开启新型智慧城市3.0 构建一体化建设新模式
- 计算机网络如何计算有效ip地址个数,知道IP和子网掩码,如何计算可用IP数量和可用的IP地址?...
- java中ISO8601标准时间格式的转换
- 持续加码娱乐化零售,“真快乐”APP驶入“快车道”
- 小白学Django第九天| Cookie和session的那些骚操作
- python 滚动字幕软件_文字跑马灯(滚动字幕)效果并指定速度
- UFS系列7:描述符、标识和属性
- 带外管理小工具--IPMITOOL常用操作指令
- 什么情况下JVM内存中的一个对象会被垃圾回收
- appnode面板中php命令 appnode-php80换成php