当前位置:网站首页>el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-method & 清除排序-clearSort
el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-method & 清除排序-clearSort
2022-07-06 12:51:00 【viceen】
el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-method & 清除排序-clearSort
1、获取单击的是第几行和第几列
<!--html-->
<el-table :cell-class-name="tableCellClassName" @cell-click="cellClick">
</el-table>
<script>
//js
methods:{
tableCellClassName({row, column, rowIndex, columnIndex}){
//注意这里是解构
//利用单元格的 className 的回调方法,给行列索引赋值
row.index=rowIndex;
column.index=columnIndex;
},
cellClick(row, column, cell, event){
console.log(row.index);
console.log(column.index);
}
}
</script>
2、表格排序
表格列本身就有 sortable 属性,可以对表格的数据进行排列,但排序规则不统一。
对表格进行排序的操作:
第一步:给el-table设置事件
@sort-change="changeTableSort"
sort-change:当表格的排序条件发生变化的时候会触发该事件
sort-change 是 element表格用来监听排序变化的,只有当表格排序发生变化,才会触发这个事件,它并不只是监听某一列的排序,而是整个表格,所以它是要写在el-table上的,而不是el-table-column上。
给el-table-column设置事件
:sort-method="sortAddTime"
自定义方法::sort-method=“function”
第二步:给需要排序的表格列设置属性
:sortable="'custom'"
sortable:对应列是否可以排序,如果设置为 ‘custom’,则代表用户希望远程排序,需要监听 Table 的 sort-change 事件。
第三步:声明 changeTableSort()
声明一个方法,他自带三个参数{ column, prop, order }
column:发生排序变化的列
prop:排序的那个表格的字段名
order:排序的方式 ascending == 升序(默认),descending == 降序 null == 不排序
3、清除排序
html:
<el-table ref="sortTable" :data="tableData">
js:
this.$refs.sortTable.clearSort();
4、实例
<template>
<el-table
ref="filterTable"
key="2"
border
:data="newTableData"
stripe
height="250"
style="width: 100%; margin-bottom: 10px"
@sort-change="changeTableSort"
@row-dblclick="dssDbSelect"
>
<el-table-column
label="序号"
type="index"
:index="indexMethod"
width="50"
></el-table-column>
<el-table-column label="类型" width="100" :sortable="'custom'"
><template slot-scope="scope">
{
{ fileTypeList[scope.row.fileType] }}
</template>
</el-table-column>
<el-table-column
prop="createTime"
sortable
label="添加时间"
show-overflow-tooltip
width="200"
:sort-method="sortAddTime"
></el-table-column>
</el-table>
</template>
<script>
export default {
data(){
return{
fileTypeList: {
'LC_FACE': '写字楼',
'LU_FACE': '商业住宅',
'3dlandmark': '公寓'
},
},
},
methods:{
/**
* @description:table序号
* @param {number} index
* @returns {number}
*/
indexMethod(index) {
return index + 1;
},
//排序触发事件 字符串形式
changeTableSort({column,order}) {
let orderName = column.label;
if(order === 'ascending'){
this.newTableData.sort((a, b)=> a[orderName].localeCompare(b[orderName],'zh')); //a~z 排序
}if(order === 'descending'){
this.newTableData.sort((a, b)=> b[orderName].localeCompare(a[orderName], 'zh')); //z~a 排序
}
},
// 根据时间戳排序
sortAddTime(obj1, obj2) {
const num1 = Date.parse(obj1.createTime) // '2021-12-10 13:12:40'格式转换成时间戳
const num2 = Date.parse(obj2.createTime) // '2021-12-10 13:12:40'格式转换成时间戳
return num1 - num2
}
}
}
</script>
5、附:
5.1、数字格式排序
排序方法,有a 、 b两个参数,跟 js的sort方法一样
若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。
若 a 等于 b,则返回 0。
若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列。
以上是数字排序。
// 排序方法
sortMethod(a, b) {
return a - b
},
5.2、字符串格式排序
示例1
//要排序的数据
var data = [
{
chinese: '张三', english: 'Chase',id:8},
{
chinese: '李四', english: 'Allen',id:5},
{
chinese: '7120043', english: 'Zola',id:6},
{
chinese: '7120002', english: 'Baker',id:14},
{
chinese: '7120255', english: 'Berg',id:2},
{
chinese: '王五', english: 'Fitch',id:0.12},
{
chinese: '阿才.zip', english: 'Dean',id:3},
{
chinese: '白云', english: 'Earle',id:35},
{
chinese: '"{"kind":7}"', english: 'Earle',id:45},
{
chinese: '"{"find":7}"', english: 'Earle',id:45},
{
chinese: '"{"and":2}"', english: 'Earle',id:38},
{
chinese: 'B', english: 'Earle',id:18},
{
chinese: 'b', english: 'Earle',id:38},
{
chinese: 'a', english: 'Earle',id:38},
{
chinese: 'A', english: 'Earle',id:38},
]
//根据汉字首字母排序
//使用箭头函数
//【注】localeCompare() 是js内置方法
// data.sort((a, b)=> b.chinese.localeCompare(a.chinese, 'zh')); //z~a 排序
data.sort((a, b)=> a.chinese.localeCompare(b.chinese, 'zh')); //a~z 排序
console.log(data);
5.3、将数组对象从小到大排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script> let dataList = [ {
title: '国籍', publishTime: 200, }, {
title: '省份', publishTime: 100, }, {
title: '城市', publishTime: 300, }, ]; console.log('排序前的数组:' + JSON.stringify(dataList)); // 将dataList 数组,按照 publishTime 字段,从小到大排序。(会改变原数组) dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime)); console.log('排序后的数组:' + JSON.stringify(dataList)); </script>
</body>
</html>
显示
排序前的数组:
[
{
"title":"国籍","publishTime":200},
{
"title":"省份","publishTime":100},
{
"title":"城市","publishTime":300}
]
排序后的数组:
[
{
"title":"省份","publishTime":100},
{
"title":"国籍","publishTime":200},
{
"title":"城市","publishTime":300}
]
边栏推荐
- The biggest pain point of traffic management - the resource utilization rate cannot go up
- document.write()的用法-写入文本——修改样式、位置控制
- 1500萬員工輕松管理,雲原生數據庫GaussDB讓HR辦公更高效
- Laravel笔记-自定义登录中新增登录5次失败锁账户功能(提高系统安全性)
- SAP Fiori应用索引大全工具和 SAP Fiori Tools 的使用介绍
- Web开发小妙招:巧用ThreadLocal规避层层传值
- 性能测试过程和计划
- Manifest of SAP ui5 framework json
- use. Net drives the OLED display of Jetson nano
- Pinduoduo lost the lawsuit, and the case of bargain price difference of 0.9% was sentenced; Wechat internal test, the same mobile phone number can register two account functions; 2022 fields Awards an
猜你喜欢
1500万员工轻松管理,云原生数据库GaussDB让HR办公更高效
2022 Guangdong Provincial Safety Officer C certificate third batch (full-time safety production management personnel) simulation examination and Guangdong Provincial Safety Officer C certificate third
968 edit distance
全网最全的知识库管理工具综合评测和推荐:FlowUs、Baklib、简道云、ONES Wiki 、PingCode、Seed、MeBox、亿方云、智米云、搜阅云、天翎
Activiti global process monitors activitieventlistener to monitor different types of events, which is very convenient without configuring task monitoring in acitivit
use. Net drives the OLED display of Jetson nano
Common doubts about the introduction of APS by enterprises
Deployment of external server area and dual machine hot standby of firewall Foundation
APS taps home appliance industry into new growth points
Swagger UI教程 API 文档神器
随机推荐
Spiral square PTA
Database - how to get familiar with hundreds of tables of the project -navicat these unique skills, have you got it? (exclusive experience)
使用.Net驱动Jetson Nano的OLED显示屏
ICML 2022 | Flowformer: 任务通用的线性复杂度Transformer
Can novices speculate in stocks for 200 yuan? Is the securities account given by qiniu safe?
【深度学习】PyTorch 1.12发布,正式支持苹果M1芯片GPU加速,修复众多Bug
How to turn a multi digit number into a digital list
[asp.net core] set the format of Web API response data -- formatfilter feature
2022 Guangdong Provincial Safety Officer C certificate third batch (full-time safety production management personnel) simulation examination and Guangdong Provincial Safety Officer C certificate third
愛可可AI前沿推介(7.6)
Is it safe to open an account in flush? Which securities company is good at opening an account? Low handling charges
自定义限流注解
Xcode6 error: "no matching provisioning profiles found for application"
Detailed explanation of knowledge map construction process steps
Swagger UI教程 API 文档神器
Select data Column subset in table R [duplicate] - select subset of columns in data table R [duplicate]
PHP online examination system version 4.0 source code computer + mobile terminal
过程化sql在定义变量上与c语言中的变量定义有什么区别
C language games - three chess
Intel 48 core new Xeon run point exposure: unexpected results against AMD zen3 in 3D cache