el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-method & 清除排序-clearSort_el-table sort-change

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、表格排序

表格列本身就有 sortable 属性，可以对表格的数据进行排列，但排序规则不统一。

对表格进行排序的操作：

第一步：给el-table设置事件

@sort-change="changeTableSort"
1

sort-change:当表格的排序条件发生变化的时候会触发该事件

• sort-change 是 element表格用来监听排序变化的，只有当表格排序发生变化，才会触发这个事件，它并不只是监听某一列的排序，而是整个表格，所以它是要写在el-table上的，而不是el-table-column上。

• 给el-table-column设置事件

:sort-method="sortAddTime"
1

自定义方法：:sort-method=“function”

第二步：给需要排序的表格列设置属性

:sortable="'custom'"
1

sortable：对应列是否可以排序，如果设置为 ‘custom’，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件。

第三步：声明 changeTableSort（）

声明一个方法，他自带三个参数{ column, prop, order }

• column：发生排序变化的列

• prop：排序的那个表格的字段名

• order：排序的方式 ascending == 升序（默认），descending == 降序 null == 不排序

3、清除排序

html:

<el-table ref="sortTable" :data="tableData">
1

js:

this.$refs.sortTable.clearSort();
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

5、附：

5.1、数字格式排序

排序方法，有a 、 b两个参数，跟 js的sort方法一样

若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组将按照升序排列。
若 a 等于 b，则返回 0。
若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列。

以上是数字排序。

// 排序方法
sortMethod(a, b) {
    return a - b
},
1
2
3
4

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

显示

排序前的数组：
[
    {"title":"国籍","publishTime":200},
    {"title":"省份","publishTime":100},
    {"title":"城市","publishTime":300}
]


排序后的数组：
[
    {"title":"省份","publishTime":100},
    {"title":"国籍","publishTime":200},
    {"title":"城市","publishTime":300}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14