今天记录一下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,
STM32的内部温度传感器实验总结。JLink、STLink、DAPLink、CMSIS DAP使用区别Linux 常用的命令vue-loader+webpack项目配置《剑指offer刷题笔记》6、重建二叉树 【c++详细题解】pycharm中安装cv2失败,及其解决数据库基础-MySql8.0(第二篇)--DML和DQLpython模拟阴阳师抽卡CSS实现loading小动画二维哈希(矩阵哈希)