El table table - get the row and column you click & the sort of El table and sort change, El table column and sort method & clear sort clearsort

el-table form —— Get the rows and columns that are clicked & Table sorting el-table And sort-change、el-table-column And sort-method & Clear sort -clearSort

1、 Get the rows and columns that are clicked

<!--html-->
<el-table :cell-class-name="tableCellClassName"  @cell-click="cellClick">
</el-table>


<script>
//js
methods:{
    tableCellClassName({row, column, rowIndex, columnIndex}){
      // Notice here is deconstruction 
      // Use of cells  className  The callback method , Assign values to row and column indexes 
      row.index=rowIndex;
      column.index=columnIndex;
    },
    cellClick(row, column, cell, event){
      console.log(row.index);
      console.log(column.index);
    }
}
</script>

2、 Table sorting

The table column itself has sortable attribute , You can arrange the data of the table , But the sorting rules are not unified .

Sort the table ：

First step ： to el-table Set up events

@sort-change="changeTableSort"

sort-change: This event will be triggered when the sorting conditions of the table change

• sort-change yes element The table is used to listen for changes in sorting , Only when the table sort changes , Will trigger this event , It doesn't just listen for the sort of a column , It's the whole table , So it is written in el-table Upper , instead of el-table-column On .

• to el-table-column Set up events

:sort-method="sortAddTime"

Custom method ：:sort-method=“function”

The second step ： Set attributes for the table columns to be sorted

:sortable="'custom'"

sortable： Whether the corresponding column can be sorted , If set to ‘custom’, It means that the user wants to sort remotely , Need to monitor Table Of sort-change event .

The third step ： Statement changeTableSort（）

Declare a method , He comes with three parameters { column, prop, order }

• column： Columns with sorting changes

• prop： The field name of the sorted table

• order： The way of sorting ascending == Ascending （ Default ）,descending == Descending null == Don't order

3、 Clear sort

html:

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

js:

this.$refs.sortTable.clearSort();

4、 example

<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=" Serial number "
     type="index"
     :index="indexMethod"
     width="50"
   ></el-table-column>
   <el-table-column label=" type " width="100" :sortable="'custom'"
      ><template slot-scope="scope">
        {
   { fileTypeList[scope.row.fileType] }}
      </template>
   </el-table-column>
   <el-table-column
          prop="createTime"
          sortable
          label=" Add the time "
          show-overflow-tooltip
          width="200"
          :sort-method="sortAddTime"
    ></el-table-column>
 </el-table>
</template>
<script>
 export default {
   data(){
      return{
        fileTypeList: {
          'LC_FACE': ' Office buildings ',
          'LU_FACE': ' Commercial residence ',
          '3dlandmark': ' Apartment '
        },
      },
   },
   methods:{
     /**
     * @description:table Serial number 
     * @param {number} index
     * @returns {number}
     */
    indexMethod(index) {
      return index + 1;
    },       
     // Sort trigger event     String form 
    changeTableSort({column,order}) {
      let orderName = column.label;
      if(order === 'ascending'){
        this.newTableData.sort((a, b)=> a[orderName].localeCompare(b[orderName],'zh')); //a~z  Sort     
      }if(order === 'descending'){
        this.newTableData.sort((a, b)=> b[orderName].localeCompare(a[orderName], 'zh')); //z~a  Sort   
      }
    },
    //  Sort by timestamp 
    sortAddTime(obj1, obj2) {
      const num1 = Date.parse(obj1.createTime) // '2021-12-10 13:12:40' Format into timestamp 
      const num2 = Date.parse(obj2.createTime) // '2021-12-10 13:12:40' Format into timestamp 
      return num1 - num2
    }
  }
}
</script>

5、 attach ：

5.1、 Number format sorting

Sorting method , Yes a 、 b Two parameters , Follow js Of sort The method is the same

if a Less than b, namely a - b Less than zero , Then return a value less than zero , The array will be arranged in ascending order .
if a be equal to b, Then return to 0.
if a Greater than b, namely a - b Greater than zero , Then return a value greater than zero , The array will be arranged in descending order .

The above is the numerical order .

//  Sorting method 
sortMethod(a, b) {
    
    return a - b
},

5.2、 String format sorting

Example 1

// Data to sort 
var data = [
        {
    chinese: ' Zhang San ', english: 'Chase',id:8},
        {
    chinese: ' Li Si ', english: 'Allen',id:5},    
        {
    chinese: '7120043', english: 'Zola',id:6},
        {
    chinese: '7120002', english: 'Baker',id:14},    
        {
    chinese: '7120255', english: 'Berg',id:2},    
        {
    chinese: ' Wang Wu ', english: 'Fitch',id:0.12},    
        {
    chinese: ' A CAI .zip', english: 'Dean',id:3},    
        {
    chinese: ' White clouds ', 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},
        
    ]
 
    // Sort according to the first letter of Chinese characters 
    // Use the arrow function 
    //【 notes 】localeCompare()  yes js Built-in methods 
  // data.sort((a, b)=> b.chinese.localeCompare(a.chinese, 'zh')); //z~a  Sort 
   data.sort((a, b)=> a.chinese.localeCompare(b.chinese, 'zh')); //a~z  Sort  
  console.log(data);

5.3、 Sort array objects from small to large

<!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: ' nationality ', publishTime: 200, }, {
       title: ' Province ', publishTime: 100, }, {
       title: ' City ', publishTime: 300, }, ]; console.log(' Array before sorting ：' + JSON.stringify(dataList)); //  take dataList  Array , according to  publishTime  Field , Sort from small to large .（ It's going to change the array ） dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime)); console.log(' Sorted array ：' + JSON.stringify(dataList)); </script>
    </body>
</html>

Show

 Array before sorting ：
[
    {
    "title":" nationality ","publishTime":200},
    {
    "title":" Province ","publishTime":100},
    {
    "title":" City ","publishTime":300}
]


 Sorted array ：
[
    {
    "title":" Province ","publishTime":100},
    {
    "title":" nationality ","publishTime":200},
    {
    "title":" City ","publishTime":300}
]