当前位置:网站首页>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}
]
边栏推荐
- Aiko ai Frontier promotion (7.6)
- Xcode6 error: "no matching provisioning profiles found for application"
- Intel 48 core new Xeon run point exposure: unexpected results against AMD zen3 in 3D cache
- [DIY]如何制作一款个性的收音机
- 全网最全的知识库管理工具综合评测和推荐:FlowUs、Baklib、简道云、ONES Wiki 、PingCode、Seed、MeBox、亿方云、智米云、搜阅云、天翎
- Manifest of SAP ui5 framework json
- #yyds干货盘点#重新梳理箭头函数的this
- Mtcnn face detection
- Redis insert data garbled solution
- R language visualizes the relationship between more than two classification (category) variables, uses mosaic function in VCD package to create mosaic plots, and visualizes the relationship between tw
猜你喜欢
使用.Net驱动Jetson Nano的OLED显示屏
15 millions d'employés sont faciles à gérer et la base de données native du cloud gaussdb rend le Bureau des RH plus efficace
Laravel笔记-自定义登录中新增登录5次失败锁账户功能(提高系统安全性)
Opencv learning example code 3.2.3 image binarization
[wechat applet] operation mechanism and update mechanism
PHP saves session data to MySQL database
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
Reviewer dis's whole research direction is not just reviewing my manuscript. What should I do?
Introduction to the use of SAP Fiori application index tool and SAP Fiori tools
OneNote 深度评测:使用资源、插件、模版
随机推荐
7、数据权限注解
document.write()的用法-写入文本——修改样式、位置控制
C language games - minesweeping
Intel 48 core new Xeon run point exposure: unexpected results against AMD zen3 in 3D cache
1_ Introduction to go language
【mysql】触发器
OneNote 深度评测:使用资源、插件、模版
OAI 5g nr+usrp b210 installation and construction
c#使用oracle存储过程获取结果集实例
HMS Core 机器学习服务打造同传翻译新“声”态,AI让国际交流更顺畅
Minimum cut edge set of undirected graph
知识图谱之实体对齐二
[DSP] [Part 1] start DSP learning
Intel 48 core new Xeon run point exposure: unexpected results against AMD zen3 in 3D cache
【微信小程序】運行機制和更新機制
What is the difference between procedural SQL and C language in defining variables
(work record) March 11, 2020 to March 15, 2021
Simple continuous viewing PTA
use. Net drives the OLED display of Jetson nano
Tips for web development: skillfully use ThreadLocal to avoid layer by layer value transmission