element-table表格排序问题和表格高度出现滚动条底部汇总行不显示问题

最新推荐文章于 2024-04-08 21:53:05 发布
VIP文章 最新推荐文章于 2024-04-08 21:53:05 发布
阅读量679 收藏 1
点赞数
分类专栏： element vuecli3 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37100378/article/details/109571016
版权

这两天在用element-table做数据报表，时不时的会遇到个梗，记录一下：

1. element-table 排序；

el-table 表格自带了sortable功能进行切换排序，但我实际用上发现并不能给我想要的结果；
例如：
我想升序排列

<el-table-column prop="je" label="金额" sortable  width="140" header-align="center" align="right"></el-table-column>

结果却是乱七八糟
在这里插入图片描述
虽然并不能直接帮我实现需求，但是组件文档中有个属性扩展说明：
在这里插入图片描述<

最低0.47元/天 解锁文章
yyshadow.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI升级后，el-table不显示 空白问题 备份包
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 element-ui@2.12.0，使用前请熟悉： element-ui@2.12.0 element-ui@2.12.0 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
element-ui table控件固定列（fixed）最低行底部不可见解决方案
qq_36493719的博客
09-01 608
.el-table th.is-leaf, .el-table td { border-bottom: 2px solid #dfe6ec !important; } 拿走不谢
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
最新发布
m0_50207524的博客
04-08 1131
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
vue-element el-table 使用sortablejs拖拽排序
小方块的世界
04-11 3771
需求描述 vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。 问题分析 方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果不太好。 方法二：可以采用table的拖拽功能实现行的一次性拖拽。该方法可以实现拖拽后调用接口，任意移动多行，但是需要依赖sortablejs仓库。 问题解决 综合考虑决定使用sortablejs实现该功能。
Vue + element 实现table表格上下移动排序
Jensonhui's Blog
11-20 2459
实现背景，table没有分页，这是前提！！ 1 . 如果后台有接口，直接改动完把列表list提交给后端 2 . 如果没有后台，增加权重字段，提交到后端 3 . 上下移动，实际就是操作数组list的顺序index 基于element-ui框架： ================ data =================== HotTableList:[] =====...
el-table底部空白出现滚动条，el-table__body-wrapper高度小于el-table的高度
wusq的博客
12-30 2862
今天在研究keep-alive页面缓存的时候发现，切换到其他页面再切换回已打开的页面时，el-table表格出现底部还有空白，但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图： 解决： 在网上找了一些方法，发现doLayout()方法可以完美解决！ element2.0.5发布的该方法，可以用于重新计算表格布局 使用方法： 如果不是缓存页面，在mounted调用，如果是缓存页面，则在activated调用。 mo
ElementUi el-table 美化暂无数据状态
柒柒兮的博客
08-05 2936
前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方 正常的空值状态如下 经过修改后 解决方法如下 <template> <el-table border :class="{ 'table': '', 'noScrol': tableText }" > //通过slot自定义空状态 <template v-slot:empty > <p :class="{'
解决element UI中el_table的合计栏在滚动条下方问题
weixin_43778945的博客
05-04 579
查了几个方法，都有问题，然后一直搁置了，但是bug总要解决。51过后好多天了，终于整出了办法，很简单，元素平移大法。看到的兄弟们测一下，有问题交流一下。
element table表格 下方出现滚动条
热门推荐
阿之阿佐
02-10 1万+
如果element  table在不该出现滚动条的情况下出现了滚动条，那么，请注意你的reset.css文件table { border-spacing: 0; border-collapse:separate;/* 如果值为collapse，则element表格下方会出现滚动条*/ }...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 ...
element-ui表格列金额显示两位小数的方法
10-18
主要介绍了element-ui表格列金额显示两位小数的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-table-bar-base:element-ui 表格滚动条插件
08-04
自定义element-ui 表格滚动条组件 by Jdes on 2019-02-18 由于 npm 的 OTP 验证问题,原来的 el-table-bar 迁移至 el-table-bar-base 请使用者删除原始包后下载 el-table-bar-base 原有功能不变 update Log v2.1.5 ...
ElementUI中el-table在表格最下方添加一列汇总小计行
BADAO_LIUMANG_QIZHI的博客
08-19 5964
场景 el-table中的每列显示的是数字，需要在表格的最下面一行添加汇总行，计算每列的总和。 el-table自带是否显示汇总行这个属性。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 属性声明如下 找到要添加汇总行小计行的el-table <el-table v-loading="loading" :data="kqtjList" show-s..
vue + element table 组件 实现 动态展示表格列 + 实现拖拽 + 实现排序
记录常见的问题以及解决办法
06-25 3955
效果图： 实现效果：点击选择显示列，通过是否勾选 展示对应的每一列数据是否展示。 代码： <div style="margin: 0; height: calc(100% - 140px)"> <el-table class="znv-table" :data="tableData" border :header-cell-style="rowHeaderClass..
弹出框被滚动条遮住的问题
liuji0517的博客
06-02 1708
我在使用vue做前端时，遇到了这个问题，请教各位有没有办法解决呢？ 滚动条改到树组件上试试 子元素的z-index不能高于父元素z-index值，包括父元素的兄弟元素，就算强制设置也是没有效果的。 把悬浮功能放到外层，就可以通过设置z-index，让内容覆盖到滚动条上；listitem的hover事件需要写个js方法，计算一下鼠标在listitem的位置，把坐标加到悬浮框上 如果你用的elementtooltip应该不会出现这个情况（正常情况会在body里面创建一个z-index>20...
【使用ElementUi中的弹框，内容是表格，固定表头，表尾合计，但是会出现合计行消失或者是错位的bug】
Min_Fox的博客
02-28 1422
问题是：合计行显示不出来 但是在dom里面是能看见代码的，如下图 有一部门显示，一部分隐藏，感觉像是没有渲染好，如下图
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值