ElementUI 穿梭框内容过长问题，手动给穿梭框内容添加title

最新推荐文章于 2024-01-22 15:35:56 发布

原创最新推荐文章于 2024-01-22 15:35:56 发布 · 916 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #vue

收录于

ElementUI 同时被 2 个专栏收录

14 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍如何在DOM元素中使用@mouseover.native指令来添加鼠标悬停事件，并通过JavaScript手动为元素设置title属性，实现当鼠标悬停时显示元素内部文本的功能。

DOM元素标签内添加事件

<el-transfer
 @mouseover.native="addTitle"
>
</el-transfer>

JS部分

//手动给穿梭框内容添加title
addTitle(e) {
  let dom = e.target;
  if (dom.title) return;
  dom.title = dom.innerText;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chaffererdog

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

bpo-elt-transfer:基于elementui 的表格穿梭框，参照了elt-transfer

04-16

bpo-elt-transfer 基于elt-transfer的自用定制, 拆了部分封装，和无用方法，提升了扩展性。更改了props 和表格的列定义方式，使其更贴合原生el-transfer 和el-table 的使用。提高了客制化能力，并且使用方式更符合直觉。安装 npm install bpo-elt-transfer 使用在main.js文件中引入插件并注册 import bpoEltTransfer from 'bpo-elt-transfer' Vue.use(bpoEltTransfer) Attributes 参数说明类型默认值 value / v-model 绑定值 array — data 候选池（左表）的数据源 array [] button-texts 自定义标题文案 array ['待选项', '已选项'] title-texts 自定义按钮文案 arr

3 条评论您还未登录，请先登录后发表或查看评论

jQuery穿梭框左右列表添加删除代码

06-10

jQuery穿梭框左右列表添加删除代码，支持多选和全选，选中列表选项后点击左右箭头按钮控制列表选项左右转移。

el-transfer穿梭框如何设置内部框的高度，以及给鼠标经过的选项值加一个title

zfkdiyi的博客

05-10

2325

<template> <el-transfer v-model="transferValue" ref="transfer" :data="dataList" @mouseover.native="addTitle" :titles="['备选列表', '已选列表']"></el-transfer> </template> //手动给鼠标划过穿梭框的元素添加一个title addTitle(e) { let tar

Element UI 自定义穿梭框的数据项

星海IT学习之路

07-29

5292

文章目录需求官网说明实现效果具体步骤附加需求：调节穿梭框高宽度需求官网说明实现效果具体步骤这是我们从数据库查询出来的数据，主要展示我红色框圈起来的字段。想要带分页的穿梭框可以参考：传送门… 附加需求：调节穿梭框高宽度由于我们显示的字段是比较长的内容，官网提供的大小不足以满足我们需求，所以想要把穿梭框的大小变大，具体实现如下： <style scoped lang="less"> /* 穿梭框外框高宽度 */ /deep/ .el-transfer-panel{

如何利用穿梭框完成自定义表格表头

wyy010818的博客

05-16

827

最近在项目中遇到新的需求,客户需要能够自己配置对应的表头并打印。第一想法就是利用穿梭框去完成对表头的自定义配置。但是因为element-plus中的穿梭框满足不了我想要的功能,只能去单独封装一个穿梭框。

elementui Transfer组件模板

qq_45030898的博客

03-30

2079

1.效果 2.代码实现 <div class="transfer">  <div style="text-align: center"> <el-transfer style="text-align: left; display: inline-block" v-model

elemen ui 表格自定义头部的方法（解决，插槽选择框不能更新的问题）

一个在全能之路上越走越远的男人。

04-17

737

用element 自带的渲染函数，再加上 el-select 可以选择，但是页面要显示选择的值，却不行。不知道为啥，数据已经更新了，但是插槽的v-mode 就是不生效。于是只能手动写渲染函数来实现了。需求是这样的，切换表头的状态，来筛选列表。引入的child 是另外写的子组件。这样之后，就可以把选择框的组件插入到表头了，也可以改变数据了。但是，随之的问题来了，怎...

element-plus自定义el-select后缀图标

qq_43651168的博客

05-04

8913

自定义el-select后缀图标

iview的穿梭框中加入列名

wytraining

06-09

487

设置iview穿梭框中的列名

基于Vue和Element-UI自定义分组以及分组全选Select 选择器

03-31

3826

文章目录基于Vue和Element-UI自定义分组以及分组全选Select 选择器源代码基于Vue和Element-UI自定义分组以及分组全选Select 选择器上一篇博文我们已经实现了基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题，但是在分组方面我们是用了element-ui 自带的使用el-option-group对备选项进行分组，它的label属性为分组名的功能，但是出来的效果样式很难自定义，就算是魔改element的样式也有一些改不了的。比如我们的需求就是需

【vue】element-ui、el-table使用V-for循环动态添加表头和数据

蓝胖子的博客

03-17

1万+

【vue】element-ui、el-table使用V-for循环动态添加表头和数据

element Transfer 穿梭框内容太长显示不全，鼠标移动上去显示全部

weixin_42349568的博客

12-07

4198

element Transfer 穿梭框内容太长显示不全，现在想要实现的功能是鼠标移动上去时显示tootips。查看了官网，没有提供tootips的方式实现，也没有提供mouseover的方法。只有一个render-content 自定义数据项。但是说需要额外安装依赖，这个就要比较麻烦了，还不如自己实现。于是想到dom元素的title属性。于是就可以想到，我们手动使用native绑定mouseover事件，然后在这个元素项上增加内容的title。穿梭框： js代码：

Element el-transfer 穿梭框详解

编程副队长

10-15

1万+

本文目录1. 前言2. 基本用法3. 可搜索4. 自定义标题和按钮的文本5. 设置数据项别名6. 小结 1. 前言穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。 2. 基本用法先看代码：基本用法:{{value}} <el-transfer v-model="value" :data="preData" @change="selectChange"></el-tran

el-transfer穿梭框使用（传值、清空）

coinisi_li的博客

08-18

9787

可能会遇到从后台获取的数据全部都显示在了左边框中，右边框没有数据，因为 v-model 绑定的selectedUserIds接收的是 key 的数组。有两个区域：一个是"待选用户"，另一个是"已选用户"。在组件el-transfer中有些特殊，因为他禁用的不是整个组件，而是每条数据。注意，这种索引方式依赖于子组件在模板中的位置，如果你的模板结构发生变化，这些索引可能会失效。来给子组件命名，然后通过命名来访问子组件，而不是通过索引。组件中的不同区域，每个区域可能具有不同的查询条件(代表一个Vue组件的引用。

亿点细节~ 超实用工作笔记！（不断更新中ing）

香菜的博客

10-09

2617

亿点细节~

基于elementui源码实现自定义穿梭框transfer组件

热门推荐

ProgramarQin的博客

07-15

2万+

需求:更改elementui中el-transfer样式，实现单击左侧选项即加入右边选框，单击右侧选项即可回到左侧选框，中间左右来回按钮更改为左侧全选右侧全选本以为自己能够不看elementui源码实现这需求，在折腾了一天还没实现后，还是回归到其源码进行研究，自己通过纯vue实现主要遇到了以下问题:若是不需要进行模糊查询可通过index进行增删改查实现穿梭框功能，但是若是加入模糊查询则问题百出，...

Element ui 穿梭框（1）改造之--分页封装组件

ddsuuny的博客

04-25

7743

el-transfer 穿梭框左侧数据太多数据比较多时，不能进行分页，决定自己封装一个！ 1.效果图： 2.注意：组件中： 2.1 可通过父组件传值（titles）修改穿梭框左边和右边的标题，形式为数组[],左侧为第一个值，右侧为第二个值； 2.2import { listUser } from "@/api/system/user"; 为接口地址； 2.3 transfer-page.vue 的data 中 defaultProps: {...

基础篇（二）：element ui中el-transfer（穿梭框）的使用

唯心所现，唯识所变

06-21

1万+

效果如下（嵌入了分页）： html中： <el-transfer style="text-align: left; display: inline-block" v-model="value" filterable :titles="['已关联', '未关联']" :button-texts="['绑定', '解绑']" @change="handleChange" :data

elementui 穿梭框 el-transfer 展示列表内容文字过长

szh1127249432的博客

08-21

5114

今天记录一下element ui组件中穿梭框内容显示不全解决方式有三种解决方式 1.改变穿梭框的宽度，在工程中全文搜索.el-transfer-panel，找到定义这个类的地方，修改宽度。 2. html代码 <el-transfer v-model="yesData" :props="{key: 'id',label: 'fileName'}" :titles="['文件列表', '已选文件']"

【Element Ui】vue3 + elementplus el-select远程搜索选项内容过长，要求不换行

alikami的博客

01-22

1759

主要是tag标签的内容太长了，导致输入框到下一行了，但是不输入的时候空一行就会很奇怪。所以希望可以在同一行显示。