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

原文地址： http://www.javashuo.com/article/p-qrayinaw-kh.html

问题描述

最近在使用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;
    }
}

这样这个问题就解决了。

小思考

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