element-transfer-不使用rendercontent方法给每一行加title的一种思路

原文地址：https://segmentfault.com/a/1190000020956789

问题描述

最近在使用 element-ui 的el-transfer时候遇到一问题：
穿梭框一行显示一条数据，但是有的数据比较长，一行显示不下，那就要把超出的部分用 ... 展示，鼠标放上去的时候展示完整内容。
一般的做法呢，就是通过 css 控制 ... 显示，同时元素的 title 属性，这样鼠标放上去的时候可以悬浮展示完整数据。
放在 el-transfer 的场景下就是通过组件提供的 render-content 来自定义每行内容的渲染，给每行元素加一个 title 属性。
但是呢，render-content的返回内容得是 JSX 语法。
官方文档 demo code 是这么写的：

renderFunc(h, option) {return <span>{ option.key} - {option.label}</span>;
}

还有一些注释：

注意：由于 jsfiddle 不支持 JSX 语法，所以使用 render-content 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

简单说就是要用 render-content 这个方法需要额外安装一些依赖。我丢，为了这么个小玩意儿我还要装一些依赖！不能忍，不能装，一定要想办法解决。于是我开始琢磨解决方法。

尝试方法

css 方案

一开始我想用 css 来解决。利用 :hover、:after 或者 :before、content、attr() 这些东西来自己实现一个 title 悬浮效果。但是翻遍了各种文档没找到怎么通过 atrr() 来获取元素文本值。然后这个方案就进行不下去了，只能换方法。

js 方案

从 js 层面看，其实这个问题的核心就是给元素设置 title 属性嘛，我手动给他加一个不就完了。我的做法是这样的：通过监听元素的 onmouseover 事件，当鼠标移动到元素上面时，获取元素的文本值设置给元素的 title 属性。
示例代码如下：

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

addTitle (e) {
    // 手动给鼠标滑过的元素加一个 title
    let target_el = e.target;
    if (target_el.title) return;
    if (/* 满足一定条件时候 */) {target_el.title = target_el.innerText;}
}

这样这个问题就解决了。

小思考

做完这个东西，我有了一点小思考。
在我们使用框架的时候，思维有时候很容易被框架绑架，反而忘记了一些原生的东西，而这些原生的东西有时候解决起来问题反倒是更简单、更直接。所以，虽然我们在使用框架做东西，但是解决问题的时候不要局限在框架内，有时候不妨跳出框架看看有没有更直接、更简单的方法。