位置: IT常识 - 正文

自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

编辑:rootadmin
自定义修改el-talbe show-overflow-tooltip的样式

推荐整理分享自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:自定义修改qq在线状态网站,自定义修改图片尺寸,自定义修改QQ机型,qq音乐歌单顺序怎么自定义修改,自定义修改手机型号下载,自定义修改图片尺寸,自定义修改QQ机型,自定义修改QQ机型,内容如对您有帮助,希望把文章链接给更多的朋友!

el-table表格行有一个可使用的show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>

当文字过多时它会显示一长行,非常不美观。

自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

当然,你可以添加一个样式修改它的宽度。

.el-tooltip__popper{ max-width:50% }

但是如果你写在style lang=“scss” scoped里面它不会生效,如果新写一个style标签在里面写样式又会造成全局样式污染,网上找了好多也没看见好的解决办法。

在查看el-table文档时发现有一个tooltip-effect属性,它有两个可选值dark/light,可以简单的修改它的主题色。

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">

如果加上这个属性,tooltip会有一个is-dark/is-light的样式名,但是这个样式是它本来就有的,即使不加tooltip-effect它也会有默认的is-dark,所以它也是一个全局样式名,这样仍然没办法解决上面提到的问题。 无奈准备放弃,用其它的比如popover或者tooltip插槽来写时突然灵光一闪,如果我不使用那两个可选值dark/light,自己写一个呢,有趣的事发生了,它的is-dark/is-light变成了我传入的值is-myTooltips

tooltip-effect="myTooltips"

这样我们就得到了一个自定义样式,虽然没了它的基础样式,但你可以在自定义样式上面想改成什么样都可以。

<style lang="scss">.is-myClassifyTooltip{ // 你想要的样式 要写一些背景色啊盒阴影啥的 }</style>

而后我又试着传入了

tooltip-effect="dark myTooltips"

有趣的事发生了,它不仅有了is-dark这个基础样式,还拥有了一个自定义样式名。这个就有点类似于popper-class的味道了。 最后就变得更简单了,直接在style里面用自定义的样式名写你想要的样式。

<style lang="scss">.myTooltips{ // 你想要的样式 }</style>
本文链接地址:https://www.jiuchutong.com/zhishi/283958.html 转载请保留说明!

上一篇:小米路由器2代1T版本 PC端使用远程下载的详细方法(小米路由器2代改8t)

下一篇:畅玩7C怎么截屏(荣耀畅玩7怎么截长图)

  • 戴尔笔记本拆机教程视频(戴尔笔记本拆机教程)(戴尔笔记本拆机inspiron7591拔电池)

    戴尔笔记本拆机教程视频(戴尔笔记本拆机教程)(戴尔笔记本拆机inspiron7591拔电池)

  • 怎么解除微信手机绑定(怎么解除微信手势密码)

    怎么解除微信手机绑定(怎么解除微信手势密码)

  • 天猫超市换购商品无法购买(天猫超市换购商品已加入购物车没有了)

    天猫超市换购商品无法购买(天猫超市换购商品已加入购物车没有了)

  • 华为人脸识别手机型号(华为人脸识别手机有哪些)

    华为人脸识别手机型号(华为人脸识别手机有哪些)

  • 广播域和冲突域怎么数(广播域和冲突域的关系)

    广播域和冲突域怎么数(广播域和冲突域的关系)

  • QQ单删加回去有验证吗(qq单删加回去有验证码)

    QQ单删加回去有验证吗(qq单删加回去有验证码)

  • 焦距4mm能看清多少距离(焦距4 mm)

    焦距4mm能看清多少距离(焦距4 mm)

  • qq审核是什么意思(qq审核员是什么意思)

    qq审核是什么意思(qq审核员是什么意思)

  • 网络卡顿是路由器的原因吗(网络卡顿是路由器的问题还是网络的问题)

    网络卡顿是路由器的原因吗(网络卡顿是路由器的问题还是网络的问题)

  • 一个微信号可以加多少群(一个微信号可以申请两个微信吗)

    一个微信号可以加多少群(一个微信号可以申请两个微信吗)

  • 8p后盖玻璃更换必须拆机吗(8p后盖玻璃更换多少钱官方)

    8p后盖玻璃更换必须拆机吗(8p后盖玻璃更换多少钱官方)

  • qq显示真名如何去除(qq真实姓名在哪里填)

    qq显示真名如何去除(qq真实姓名在哪里填)

  • wsdl文件直接生成(wsdl文件用什么打开)

    wsdl文件直接生成(wsdl文件用什么打开)

  • win10怎么连接蓝牙音箱(win10怎么连接蓝牙鼠标)

    win10怎么连接蓝牙音箱(win10怎么连接蓝牙鼠标)

  • 手机拍照ev是什么(手机照相中的ev是什么意思)

    手机拍照ev是什么(手机照相中的ev是什么意思)

  • 图片打码怎么去掉(图片打码怎么去掉美图秀秀)

    图片打码怎么去掉(图片打码怎么去掉美图秀秀)

  • 小米5耗电快怎么办(小米耗电快怎么回事)

    小米5耗电快怎么办(小米耗电快怎么回事)

  • 华为互传功能在哪(华为手机互传功能在哪里打开)

    华为互传功能在哪(华为手机互传功能在哪里打开)

  • Win10怎么实现自动换壁纸功能? Win10自动换壁纸的技巧(windows10怎么设置自启动)

    Win10怎么实现自动换壁纸功能? Win10自动换壁纸的技巧(windows10怎么设置自启动)

  • 【数据结构·考研】链表的头插法和尾插法(数据结构考试内容)

    【数据结构·考研】链表的头插法和尾插法(数据结构考试内容)

  • Win11装了VMware后找不到wifi网络的解决方法(虚拟机安装win11提示无法运行)

    Win11装了VMware后找不到wifi网络的解决方法(虚拟机安装win11提示无法运行)

  • input输入时的边框样式去除(input输入改变边框颜色)

    input输入时的边框样式去除(input输入改变边框颜色)

  • column命令  格式化内容为多列格式(columninfo)

    column命令 格式化内容为多列格式(columninfo)

  • 含13%的增值税怎么算
  • 税收减免属于什么收入
  • 可回收再生资源有哪些
  • 小规模纳税人残保金
  • 跨月作废增值税专用发票
  • 处置投资性房地产的损益怎么算
  • 房地产企业被收购报表处理
  • 会计凭证整理的要求有哪些
  • 电子承兑背书一般多久到账
  • 无法确认退货率时,差错更正为啥不反转增值税
  • 接受长期股权投资的条件
  • 递延所得税资产和负债怎么理解
  • 税号里的字母要大写还是小写
  • 推广费是广告费和业务宣传费吗
  • 企业房屋管理办法
  • 旅游服务机票款普通发票可以抵扣吗
  • 异地取款还有手续费吗
  • 企业自用的厂房计入什么科目
  • 公务费和业务费怎么算
  • 收到工会经费返还如何做账
  • 去年收入少做了怎么调账
  • 加速折旧以后年度如何填报调减额
  • 如何冲回以前年度账户
  • 反避税的意义
  • 保税区开出的专票可以抵扣吗
  • 今年利润弥补以后怎么算
  • 小规模计提增值税的会计科目
  • win7打开软件提示0xc0000005
  • PHP:oci_set_edition()的用法_Oracle函数
  • wlms.exe是什么
  • mac系统怎么添加网络映射
  • 劳务派遣公司账目如何做
  • 怎么绕开中介找到房主
  • 什么时编制
  • 黄金旧料卖出收据怎么写
  • 异地开办分公司流程
  • php操作字符串
  • php逆序排列数组
  • 出租车发票能不能多开
  • 机票报销需要哪些才可以
  • 共管账户可以转账吗
  • vue的路由器
  • angular 初学者快速上手教程
  • php统计系统
  • python dayup
  • 固定资产包括无形资产吗?
  • 员工宿舍的物业费要交个税吗
  • 个人所得税大病医疗夫妻双方怎么扣除
  • mysql事务类型
  • mongodb使用场景总结
  • pycharm折叠代码块快捷键
  • 什么是企业会计确认计量和报告的空间范围
  • sql server join
  • 有形动产租赁属于经营租赁吗
  • 维修材料分类
  • 支付商业承兑汇票怎么做
  • 转帐支票遗失怎么办
  • 减值准备包括哪几个方面
  • 建筑工地塔吊租赁会计分录
  • 款项已支付是什么科目?
  • 房屋租赁公司装修费会计分录
  • 会计建账的内容
  • 硬盘读盘慢修复
  • ps1是什么文件
  • 如何创建微软帐户
  • linux修改用户名
  • win 10系统怎么提高网速
  • linux tcptraceroute
  • es6解构函数
  • linux cz命令
  • node js并发加载缓慢
  • unity怎么加人
  • js str.match
  • Node.js中Bootstrap-table的两种分页的实现方法
  • nodejs eventloop
  • js proto prototype
  • 宁波车管所作息时间
  • 安徽省渔业管理办法第十条规定
  • 煤老板的苦恼
  • 重庆准生证网上怎么申请领取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设