ElementUI - Table 表头排序
ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序。
项目需求: 点击表头排序的时候,对所有数据进行排序。
初步方案: 在点击排序按钮的时,在排序事件sort-change 中,进行数据请求,
此时会先重拍一次当前页面的数据,再渲染接口返回数据。用户体验不是很好。
优化方案: 使用render-header自定义tableHeader,此时要使用render函数来创建表头。
getheaderTime(h) {
const This = this
return h('div', {
},
['告警时间',
h('span', {
class: 'iline-table-sort'
},
[
h('i', {
'class': {
'el-icon-caret-bottom': This.orderByType === 'desc',
'el-icon-caret-top': This.orderByType === 'asc',
'active': This.orderBy === 'daqTime'
},
attrs: {
'orderByType': 'desc',
'orderType': 'daqTime'
},
on: {
click: This.clickHandler
},
style: {
fontSize: '22px'
}
})
]
)
])
}
ElementUI - Table 表头排序的更多相关文章
- javascript: 带分组数据的Table表头排序
如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...
- HTML table表头排序箭头绘制法【不用箭头图片】
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...
- element-ui table中排序 取消表格默认排序问题
sortTable 设置为 custom 一定要设置在列上
- 解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
- element-ui自定义table表头,修改列标题样式
elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...
- element-ui table float类型数据排序失败
背景:对于16.88这样的数据,点击表头排序无效,仍然是乱序 解决办法:自定义排序方法,:sortable="true" :sort-mothod="xxxx" ...
- iview 或 element-ui table 列表表头加样式
table 表头有时候需要加一些小样式比如 必填项 这是我项目中遇到的需求=== 比例,产品, 部门为必填项,这个时候就需要在表头加个红色小星星. 首先在table中绑定:header-cell-c ...
- element ui table 表格排序
实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...
- Lua table.sort排序
在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...
随机推荐
- 登录获取token,token参数关联至所有请求的请求体内
问题描述: 有些系统接口判断用户是否登录,是校验登录接口成功后传的token值,也就是请求系统所有接口时,前端传参必带登录成功后接口返回的token,后台以此检验是否过期或是否有登录.所有接口都依赖登 ...
- macaca 初试
看到macaca的介绍,在移动端和PC端的自动化UI测试都同时支持, 联想到最近的行业都是同时对移动端和PC端(较少,几乎不维护)追求UI自动化测试,打算拿来试一下. 首先上macaca的地址:htt ...
- jQuery的版本兼容问题
之前在做头像上传的时候,使用的jQuery是1.8.2的版本,然后头像上传做完后,发现项目用的jQuery版本是3.3.1的.由于两个版本的差距太大了.所以兼容很差. 3.3.1不支持剪切头像的某些函 ...
- vue-element-ui之弹窗重置
遇到列表中需要给弹框赋默认值并且关闭后需要清空数据+清除验证时可以这么写:
- Netty客户端发送消息并同步获取结果
客户端发送消息并同步获取结果,其实是违背Netty的设计原则的,但是有时候不得不这么做的话,那么建议进行如下的设计: 比如我们的具体用法如下: NettyRequest request = new N ...
- PCA算法数学原理及实现
数学原理参考:https://blog.csdn.net/aiaiai010101/article/details/72744713 实现过程参考:https://www.cnblogs.com/ec ...
- linux php5.6 安装扩展 memcached
wget http://pecl.php.net/get/igbinary-1.1.1.tgz tar -xzvf igbinary-.tgz cd igbinary- /usr/local/php5 ...
- BATJ面试指南
Java并发编程面试题汇总 线程 线程是一个独立执行的调用序列,同一个进程的线程在同一时刻共享一些系统资源(比如文件句柄等)也能访问同一个进程所创建的对象资源(内存资源).java.lang.Thre ...
- Linux Mysql创建用户并分配权限
1.查看全部的用户: select user,host from mysql.user\G; 2.新建用户: create user ‘用户名’@‘主机名’ identified by ‘用户密码 ...
- mysql Navicat客户端
Navicat是一个用来操作多种数据库的客户端. 可应用操作系统:Windows.macOS.Linux. 可应用 Navicat 产品:Navicat for MySQL.Navicat for P ...