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 表头排序的更多相关文章

  1. javascript: 带分组数据的Table表头排序

    如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...

  2. HTML table表头排序箭头绘制法【不用箭头图片】

    效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

  3. element-ui table中排序 取消表格默认排序问题

    sortTable  设置为 custom 一定要设置在列上

  4. 解决element-ui表格表头内容太长时的换行问题

    在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...

  5. element-ui自定义table表头,修改列标题样式

    elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...

  6. element-ui table float类型数据排序失败

    背景:对于16.88这样的数据,点击表头排序无效,仍然是乱序 解决办法:自定义排序方法,:sortable="true" :sort-mothod="xxxx" ...

  7. iview 或 element-ui table 列表表头加样式

    table 表头有时候需要加一些小样式比如 必填项 这是我项目中遇到的需求===  比例,产品, 部门为必填项,这个时候就需要在表头加个红色小星星. 首先在table中绑定:header-cell-c ...

  8. element ui table 表格排序

    实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...

  9. Lua table.sort排序

    在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...

随机推荐

  1. JS数组遍历

    1. forEach() 循环数组,不会改变元素,不会返回新数组 arr.foreach((value,index)=>{}) 2. map() 遍历数组,对每个元素进行处理,之后返回元素:会返 ...

  2. Vant UI 安装

    一:安装 npm i vant -S 二.引入组件(共有三个方法) 方法一:使用 babel-plugin-import (推荐) 1. 安装 babel-plugin-import 插件 npm i ...

  3. xtratabcontrol控件的标签样式--文本的宽高

    Skin skin_ = TabSkins.GetSkin(DevExpress.LookAndFeel.UserLookAndFeel.Default.ActiveLookAndFeel); Ski ...

  4. python learn note1

    1.python 的缩进 习惯了java,c++之类的宽容,初学python,被它摆了道下马威,写if else,竟然必须要我正确用缩进格式,原来在python里不能用括号来表示语句块,也不能用开始/ ...

  5. 基于Protostuff实现的Netty编解码器

    在设计netty的编解码器过程中,有许多组件可以选择,这里由于咱对Protostuff比较熟悉,所以就用这个组件了.由于数据要在网络上传输,所以在发送方需要将类对象转换成二进制,接收方接收到数据后,需 ...

  6. linux下sort命令详解

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  7. C# Thread IsAlive 理解

    IsAlive的功能就是判断当前线程是否处于活动状态. public class Program { public static void Main(string[] args) { try { Wr ...

  8. 三大统计相关系数:Pearson、Spearman秩相关系数、kendall等级相关系数

    统计相关系数简介 由于使用的统计相关系数比较频繁,所以这里就利用几篇文章简单介绍一下这些系数. 相关系数:考察两个事物(在数据里我们称之为变量)之间的相关程度. 如果有两个变量:X.Y,最终计算出的相 ...

  9. Java作业:第二次过程性考核 ——长春职业技术学院 16级网络工程

    ## 时间有限,脑力不足 ## 只给出代码部分(附带注释) 码云 https://gitee.com/SoridoD/codes 7-5: import java.util.Scanner; clas ...

  10. 使用机房的网线 连接到自己的电脑 解决Internet没有访问权限问题

    在机房把机子上的网线拔了,插在自己的笔记本上.发现并不能用,能识别Internet,但是没有访问权限. 解决办法: 去查看机房的机子的IP地址和DNS地址,就是那根网线原本连接的那台机.(网线先别拔出 ...