位置: 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怎么截长图)

  • 异地预缴税款不交可以吗
  • 四联发票都需要盖什么章
  • 投资性房地产在非货币性资产交换怎么处理
  • 年终奖影响社保公积金基数吗
  • 车辆备注栏备注怎么填
  • 已申报未导入是申报成功了吗
  • 金税系统维护费可以全额抵扣吗
  • 非货币性资产交换补价大于25%的会计处理
  • 预付账款属于什么账户
  • 固定资产原值增加后如何计提折旧
  • 发票勾选平台显示不成功
  • 允许列支的捐赠比例
  • 房地产企业预收款什么时候确认收入
  • abs应付债券
  • 凭证类别不合法怎么处理
  • 持续经营净利润是什么意思
  • 企业债券收入要在所得税前扣除吗
  • 会计账目怎么理
  • 财务软件里凭证打印如何设置不打印三级科目
  • 分期收款所得税收入确认多少
  • 多结转成本的会计分录
  • 销售外购设备并提供安装服务
  • 公司费用高好还是低好
  • 出口发票汇率按照报关单什么时间计算
  • wx小程序
  • 未缴纳社保可以直接走人吗
  • vue前端框架搭建
  • php curl_init
  • 电子税务局附加税退税在哪看
  • 购入苗木进项税的会计分录
  • 培训机构账务处理
  • 上个月发票税率怎么查
  • 公司的基本户怎么换
  • 利润分配的基本原则是( )
  • 劳务分包收入交什么税
  • 进口消费税应该记到什么科目
  • 公积金怎么推出工资
  • 企业转让固定资产增值税税率
  • 企业收入确认的文章
  • 产品淘汰造成的影响
  • sqlserver如何锁表
  • mysql数据库优化及sql调优
  • 建筑劳务公司一年赚多少钱
  • 工会经费会计分录最新
  • 发行股票会计怎么做分录
  • 进项税额有留底怎么做分录
  • 调整凭证能不能做2个贷方
  • 专利年费 缴纳
  • 企业分配利润的原因
  • 资源税的账务处理
  • 2020年扶贫拨款
  • 最新的会计规定出台时间
  • 公司资产业务
  • 公司注销财务账本怎么处理
  • 小规模公司购买成本票严重吗
  • 挂靠企业电费如何处理?
  • ゆうちょ银行转账步骤
  • 合作社开具免税发票流程
  • 去年未做账的发票怎么查
  • sql server高级编程
  • windows7如何获得正版
  • linux三个主要部分及功能
  • windowsxp的开始菜单
  • centos搭建lamp环境
  • centos7ftp
  • searchnavversion.exe - searchnavversion是什么进程 作用是什么
  • windows8桌面设置
  • win10安装失败
  • win8系统如何关闭杀毒系统
  • windows10x预览版
  • Win8系统怎么安装
  • windows图片锁屏
  • win10正式版多少钱
  • css 分页
  • Node.js中的全局对象有
  • nodejss
  • 编写js代码要注意什么
  • 一般纳税人收到普通发票怎么做分录
  • 国家电子税务总局重庆电子税务局
  • 税务局的局长是什么级别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设