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

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

问题描述

最近在使用element-uiel-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或者:beforecontentattr()这些东西来自己实现一个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;
    }
}

这样这个问题就解决了。

小思考

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

原文链接:segmentfault.com

上一篇:Java难学吗?软帝学院带你从零开始学java,走向精通!
下一篇:文档书写中#和.用法上的区别

相关推荐

  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    10 个月前
  • 面试官: 聊一聊 HOC、Render props、Hooks

    在以前我们可能会看到很多文章在分析 HOC 和 render props, 但是在 2020 年 ,我们有了新欢 “hook” . 本篇文章会分析 hook , render props 和 HOC ...

    3 个月前
  • 防止contenteditable加入<DIV>进入铬

    iConnor(https://stackoverflow.com/users/1907358/iconnor)提出了一个问题:Prevent contenteditable adding on E...

    2 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    18 天前
  • 踩坑记之基于Vue+Element+Koa实现云上存储

    前言最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛...

    20 天前
  • 跟着element学习写组件

    如何使用vue写一个组件库 组件以插件的形式引入使用,当然,也可以直接在页面引入组件文件,两者按需使用。 安装插件: vue.install源码: 通过源码可知,vue不会重复安装同...

    1 年前
  • 超详细 ElementUI 源码分析 —— Input

    最近在学习 Vue 框架,想深入了解一下组件化开发以及封装组件库的思想,而 ElementUI 作为这方面做的最好的也是最常用的组件库,它的源码一定有很多值得我们去学习的地方,所以去 ElementU...

    2 个月前
  • 财产&apos;价值&apos;不在型“价值存在;HtmlElement“;

    Bjarke FreundHansen(https://stackoverflow.com/users/81398/bjarkefreundhansen)提出了一个问题:The property 'v...

    2 年前

官方社区

扫码加入 JavaScript 社区