element-ui el-table to sort the table sortable parameter analysis

Table sorting assembly, click the header can be sorted in ascending and descending order

Page code, basically sort of parameters are used

<EL- the Table 
  : the Data = "TableData" 
  style = "width: 100%" 
  <- when data is sorted by the background sortable = "custom", need to listen to sort click events, returns the current prop and order ->! 
  Sort-Change = @ "changeSort" 
  <-! default default sort -sort specified, the default sort by date column is sorted in ascending order, are sorted in ascending order by default -> 
  : Sort-default = "{prop: 'date ', Order:' Ascending '} " 
  border > 
  <EL-the table- column 
    prop =" dATE " 
    label =" date " 
    <- if necessary to form the row sort, plus a sortable parameter values are desirable! to true, to false , Custom -> 
    the sortable
     <-! Sort-Orders received an array, to specify the order of clicking when sortable header, the default is [ 'ascending', 'descending', null] When the first click ascending ascending, descending and then click descending, then click not sorted null, by default index table rows may set the order themselves ->. 
    : Sort-Orders = "[ 'Ascending', 'Descending']" 
    width = "180 ["> 
  </ EL-Table-column> 
  <EL-the table- column 
    prop = "name" 
    label = "name" 
    <-! Sort-specified data by which to sort attribute, if not specified, is press here prop discharge value, when a specified character string written in the form: sort-by = "name" , specifying a plurality of, here is the effect of using an array, when the value of all the same name, it is sorted by address -. > 
    : = Sort-by "[ 'name', 'address']" 
    the sortable 
    width = "180 ["> 
  </ EL-Table-column> 
  <EL-the table- column 
    prop = "address"
    label = "Address"
    <! - above parameters are sort sort on tableData data has been obtained, if the data do not all data in the current data paging, sorting the background you need to be sorted, then the need to value sortable changed Custom, click event listener table sorted by sort-change event -> 
    the sortable = "Custom" > 
  </ EL-table-column> 
</ EL-table> 
Methods: { // get the data from the background, reordering   changeSort (Val) { 
    the console.log (Val) // column: {...} Order: "Ascending" prop: "DATE" // retrieve the current sort data according to the background, the background will typically require a sort parameters 
  } 
}