今天记录一下element ui组件中穿梭框内容显示不全解决方式

有三种解决方式

1.改变穿梭框的宽度,在工程中全文搜索.el-transfer-panel,找到定义这个类的地方,修改宽度。
2.
html代码
<el-transfer v-model="yesData" :props="{key: 'id',label: 'fileName'}" :titles=
"['文件列表', '已选文件']" @change="handleChange" :data="fileArr" filterable :filter-
method="filterMethod" filter-placeholder="请输入关键字" @mouseover.native="addTitle" >
</el-transfer>
js代码
addTitle(e) { //手动给鼠标划过的元素添加一个title let target_el = e.target; if (target_el.
title) return; target_el.title = target_el.innerText; },
*
html代码
<el-transfer v-model="yesData" :props="{key: 'id',label: 'fileName'}" :titles=
"['文件列表', '已选文件']" @change="handleChange" :data="fileArr" filterable :filter-
method="filterMethod" filter-placeholder="请输入关键字" :render-content="renderFunc" >
</el-transfer>
js代码
renderFunc(h, option) { return <span title={option.fileName}>{option.fileName}<
/span>; },
效果图

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述