element transfer 不使用render-content方法给每一行加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 { option.key } - { option.label };
}

还有一些注释：

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

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

尝试方法

css方案

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

js方案

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

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

这样这个问题就解决了。

小思考

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

2019.11.19更新

跟公司的大牛讨论了一下，发现可以使用vue的渲染函数实现这个需求，写法更优雅。其实还是使用render-content方法，只不过不用JSX写法，也不用引入额外的依赖。具体demo code如下：

renderContent (h, option) {
    return h('span', {domProps: {title: option.label}}, option.label);
}

这个写法和iview的render方法一个道理，推荐使用此种写法。