最近項目需求需要，需要對表格列進行自定義排序，用的是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的箭頭函數寫法，傳一個自定義的字段名進去，然后由當前兩個對比的數據行對象獲取，從而進行比較即可。