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 ...
随机推荐
- conda环境复制
配置环境是一个很烦的事,有时候用到服务器需要一遍又一遍的配..太麻烦了,这时候就要用到conda,直接复制已有的环境.事半功倍. 第一种方法:地址复制 首先找到要复制的环境的路径:conda info ...
- python 报错 TabError: inconsistent use of tabs and spaces in indentation
写python的时候如果出现如题的错误 TabError: inconsistent use of tabs and spaces in indentation 意为:制表符错误:缩进中制表符和空格使 ...
- nodejs常见问题
Js 基础问题 与前端 Js 不同, 后端是直面服务器的, 更加偏向内存方面. [Basic] 类型判断 [Basic] 作用域 [Basic] 引用传递 [Basic] 内存释放 ...
- 初识HT for web
目前国内经济转型在潜移默化中已经发生了巨大的变化,保险,零售业,汽车等我能想到的. 只要互联网能插足的行业,都难逃一‘劫’. 刚看了一篇博客--基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化 ...
- android 重启app
package com.xproject.utility; import java.lang.reflect.Field; import java.lang.reflect.InvocationTar ...
- 有关Java字符集编码的问题
在Java语言中,下列关于字符集编码(Character set encoding)和国际化(i18n)的问题,哪些是正确的? A.每个中文字符占用2个字节,每个英文字符占用1个字节 B.假设数据库中 ...
- spring-boot整合mybatis(web mysql logback配置)
pom.xml相关的配置说明. 配置文件看着比价多,在创建spring-boot项目的时候,自需要添加web,mysql,mybatis三个选项即可 <?xml version="1. ...
- 获取当前TestStep发送的request信息
在当前test step的Script Assertion里添加 // Get request url def requestURL = messageExchange.getEndpoint() / ...
- java中的常用特殊字符
1.转义字符反斜杠(\) 我们知道html中大都是双标签,如果在标签内想要输出带有标签结束符的文本都必须进行转义,html中是采用对应的字符替换,如<可用<替换 在java当中,我们要转义 ...
- 微信小程序 画布drawImage实现图片截取
大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...