vue Element-ui el-table合计行样式自定义、不换行显示

最新推荐文章于 2024-07-29 11:05:02 发布
最新推荐文章于 2024-07-29 11:05:02 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42220283/article/details/120529420
版权
本文介绍了如何在Vue项目中，使用Element-UI的el-table组件时，针对合计行进行样式自定义，以解决数字过长无法完全显示的问题。通过JavaScript设置'title'属性实现鼠标悬停显示完整内容，并利用CSS防止文字换行。
摘要由CSDN通过智能技术生成

本项目由于合计汇总数字太多太长，又不能改变原width的情况下，就自定义样式超出点点点了，又要鼠标悬浮看全。js（设置‘title’） 配合 css（不换行）

  watch: {
   
  //loading 为v-loading
    loading(bool) {
   
      !bool && setTimeout(() => {
   
        const nodeList = this.footerTr || []
        nodeList.forEach<
最低0.47元/天 解锁文章
一撇一画
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
传入el-table的数据结构
ZQH084811的博客
09-19 840
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
Element el-table不换行显示
Dream
10-15 1万+
element 表格需要单元格不换行显示 方法一：增加样式 .el-table .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 方法二：增加show-overflow-tooltip属性 el-table 默认会换行显示，加了show-overflow-tooltip属性，会单行显示，且超出会以popover去显示 ...
Vue2/element-ui el-table实现指定行的隐藏与显示，并自动根据显示的行数调整列表合并项
最新发布
AtlaS_Y的博客
07-29 426
目标效果：根据el-checkbox组件绑定选择的属性，自动调整表项，以实现只显示选中的属性，并且自动调整列表合并项，以实现年份和属性的正确对应。
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”...
rainbow702的博客
06-15 1441
之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。 先说一下几个要点： table 的 “table-layout”属性要声明为“fixed” 对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。 对可能出现内容很长的单元格，设置以下三个属性： ...
element table自定义合计行
weixin_48667689的博客
12-07 905
element table自定义合计行
vue element 自定义合计行
丽啊丽宝的博客
04-26 2002
思路：先输出合并的数据，根据输出值，构造自己需要的数据 上代码 // 不写完整的代码的了，把重要的东西写一下就可以了 // show-summary：是否显示合计列 :summary-method="getSummaries"自定义合计 <el-table :data="tableData" :summary-method="getSummaries" show-summar...
vue element-ui中table合计指定列求和实例
01-18
// 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计' } else if (index === 5 ||...
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置问题，导致组件无法正常工作，比如在本案例中提到的“el-table不显示空白问题”。以下是对这个现象的深入分析及解决策略。 首先，让我们了解可能的...
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
10-16
在介绍Vue Element-UI Table组件的动态生成表头和数据、修改单元格格式以及父子组件通信的过程中，涉及到了Vue框架的诸多核心知识点。以下将详细解释这些知识点。 首先，Vue是一种构建用户界面的渐进式框架。它的...
element ui表格自定义合计行
qq_41821445的博客
09-08 4584
前两天在做表格时，需要用到表格合计行，我是这样写的，话不多说上代码 第一步就是先在table中添加show-summary使其显示合计行； 接着就是添加:summary-method="getSummaries"自定义合计规则，方法getSummaries返回一个数组，数组中的各项就会填充在表格合计行中 1、中的columns是每列的信息，data是每行的信息 2、此处是在index=0的这一列显示为“总计” 3、在这个方法是处理我从接口中取到的数据，然后将对应属性的值push到arr..
el-table合计行单元格合并、单元格样式修改
weixin_42375707的博客
06-17 1万+
el-table合计行单元格合并、单元格样式修改
改变elementui中table组件底部合计栏的样式
king_gy258的专栏
09-10 3651
因el-table合计行原本样式中border线条颜色太浅，需要给其加深颜色。因为只改单个页面的，所有不能用全局css。想到了用watch来实现，代码 watch: { tableData: { handler: function(newName, oldName) { this.$nextTick(() => { // 改变合计行样式 const s_table = document.getEle...
Vue+elementUI-table组件-多行合计行
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
11-09 1万+
此博客通过投机取巧的方法，将table中本来只有一行的合计行，制作成(伪)多行合计行效果 之所以叫做(伪)多行合计行，是因为这个合计行实际上还是一行，只是通过样式改成了多行的模样~ 参考博客： elementui el-table 多行合计、插入标签_Nancy617的博客-CSDN博客https://blog.csdn.net/Nancy617/article/details/112309507 elementUI官网样例： 将show-summary设置为true就会在表格尾部展示合计行
vue + element-ui 使用ex-table-column插件实现el-table的内容自动撑开表格且不换行的功能
@Grapefruit的博客
05-07 7310
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 首先安装element-ui并实现引入，这个相信大家都会，柚子就不啰嗦了。 下面开始 第一步：安装ex-table-column插件 npm install ex-table-column --save //有条件可以使用c...
el-table-column内容不自动换行
热门推荐
洋成林
03-26 4万+
项目使用ElementUI，在显示时，如果某一个数值长度超过列宽，会默认换行，如下 这样的话造成页面动态变化，很难看，可以通过给el-table-column增加show-overflow-tooltip样式来解决。 <el-table-column prop="goodscode" label="货物代码" width="80" show-overflow-tooltip>...
element UI 表格实现 表尾合计行 ——小肉包
小肉包的博客
07-27 6201
element UI 表格实现 表尾合计行 可以根据需要计算任意列的合计，效果图如下 说明：
el-table单元格不自动换行
wangshuai13383347132的博客
07-28 1765
el-table单元格不自动换行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值