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

  • 什么是价税分离?
  • 发放上年年终奖个税
  • 摊销无形资产商标权计入什么科目
  • 有两处收入的怎么报个税汇算清缴
  • 房地产预售啥意思
  • 两免三减半的范围
  • 高新技术企业如何查询
  • 未加工食材
  • 事业单位现金收支管理办法
  • 暂估入库冲回的会计分录
  • 公司银行社保代缴怎么交
  • 物业公司代收水电费会计分录
  • 付款小于发票金额的原因
  • 公司转账给公司会计分录
  • 出口退税管理系统怎么登录
  • 个人所得税工资和实际工资对不上
  • 税务行业软件
  • 公司法人变更账务需要重新建立吗
  • 合伙人投入的资金怎么记账
  • 存货计价方法的选择对利润表中的项目没有影响
  • 上月计提租赁费下月扣怎么做账
  • 利息收入 开票
  • 自然人个人能否纳税
  • 公证处委托他人办理房产证手续
  • 公司增加注册资金需要实缴吗
  • 已经上传的红字怎么修改
  • 微信转账截图可以p图吗
  • 苹果mac系统桌面空间不够
  • macbookpro常见问题
  • 公司邮票报销
  • 资产增加为什么记借方
  • win10蓝牙共享网络给手机
  • 资产盘盈盘亏处理
  • 分公司可以给总公司开发票么
  • javascript猜数字游戏+表单
  • java中的gui是什么
  • 股东从公司账户上转钱违法吗
  • 城镇土地使用税征收标准及计算方法
  • python locator
  • 中介公司服务范围都有哪些
  • 在建工程盘盈盘亏的账务处理
  • 延期付款利息收入要交增值税吗
  • 哪些属于费用发票类型
  • 个体工商户生产经营所得税税率表
  • 建筑业周转材料
  • 股东撤资如何退还资金,用途写什么
  • 房产契税新政策2023
  • 企业接收到政府信息
  • 飞机票没有发票只有行程单
  • 非流动资产增加意味什么
  • 公司购买电视属于什么费用
  • 利得与损失的四种类型
  • 私企会计一般一个月多少钱
  • 建账时都要建哪些科目
  • 金融企业借款费用扣除比例
  • sql server数据库正在恢复
  • sql server查询
  • 安装win7旗舰版鼠标无法使用
  • 使用win10
  • win10怎么进u盘系统
  • freebsd中文手册
  • linux ln命令 -s
  • 硬盘版win10
  • win7系统不兼容开不了机
  • win7运行速度
  • win10预览版绿屏重启解决
  • [置顶] 此外,车牌号:454118(懂得都懂[doge])
  • 安卓网络编程面试题
  • javascript的
  • thread python
  • Jquery通过ajax请求NodeJS返回json数据实例
  • linux 打包
  • javascript的dom操作
  • jquery 使用
  • php使用js
  • js延时加载方式
  • 同源策略详解
  • 通用机油防伪查询
  • 广西税务12366如何交社保
  • 广东发票查验平台下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设