ivew | element ui- 關於table組件自定義sortMethod排序不生效或錯誤問題處理

 

最近項目需求須要，須要對錶格列進行自定義排序，用的是iview的組件，看了文檔，table 排序這部分，可是沒有給出相關例子。覺得不難搞的，是不難搞，就是折騰了好一會。。。

Iview table 排序

 

 data () { return { columns5: [ { title: 'Date', key: 'date', sortable: true, }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age',  sortable: true, sortMethod:function(a,b,type) { if (type == 'asc') { return a > b? -1 : 1 } else { return a > b? -1 : 1 } } }, { title: 'Address', key: 'address' } ], data5: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] } }, methods: { } 

 

注意： 返回必須是-1 ，1

 

Element UI table 排序

 

遠程排序

 

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
<div id="app">
<template>
  <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="sortChange"   
    >
    <el-table-column prop="date" label="日期" sortable='custom'  width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址" :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
</div>

js部分

var Main = { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' }] } }, methods: { formatter(row, column) { return row.address; },  sortChange(column, key, order) { console.log(column, key, order) } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')

控制檯截圖：

 

 自定義排序 -- sort-method

 html部分：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
<div id="app">
<template>
  <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}"
         
    >
    <el-table-column prop="date" label="日期" :sortable="true" :sort-method="sortMethod" //只需寫方法名，不能把添加參數括號的寫法如：sortMethod(a,b) width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址" :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
</div>

js部分：

var Main = { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' }] } }, methods: { formatter(row, column) { return row.address; },  sortMethod(obj1, obj2) { console.log(obj1, obj2) } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')

控制檯截圖：

 方法自動帶有data裏面先後的數據行對象，能夠根據array.sort（）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 的寫法進行自定義排序的方式

不如我本身寫的排序，想默認點擊排序字段，而後先是降序，而後再點擊再是升序。以下：

 
sortMethod(a, b) {  console.log(a, b) var at = Date.parse(a.date) var bt = Date.parse(b.date) console.log( bt, at) if (at > bt) { console.log(1) return -1 } else { console.log(-1) return 1 }
}

這樣會有個問題，不能都在點擊排序字段列的時候，就拿到該字段，如今只能是在函數方法裏面經過obj.date的獲取屬性的方式獲取。若是整個表格不少個字段要這樣排序，就麻煩了。

改進版寫法：

<el-table-column prop="date" label="日期" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'date')" width="180">
    </el-table-column>

sortMethod(obj1, obj2, column) {

// console.log(obj1, obj2, column)
　　var at = obj1[column]
　　var bt = obj2[column]
　　// console.log(at, bt)

　　if (at > bt) {
 　　return -1
　　} else {
 　　return 1
　　}

}

能夠採用js的箭頭函數寫法，傳一個自定義的字段名進去，而後由當前兩個對比的數據行對象獲取，從而進行比較便可。