前言
不知道大家在使用 element 表格组件时有没有发现表格列的排序功能,时好时不好,当数据都为个位数时,使用是正常的,一旦数据多元化后,排序就失去了作用,如下图:
解决方案
sort-method 方法
sort-method
方法对数据进行排序的时候使用的方法,仅当 sortable
设置为 true
的时候有效,需返回一个数字,和 Array.sort
表现一致。
核心代码
:sort-method="(a,b)=>{return a.age - b.age}"
加上后效果
完整代码
<template>
<div>
<el-table stripe :data="tableData" border style="width: 100%">
<el-table-column align="center" prop="name" label="姓名"></el-table-column>
<el-table-column align="center" prop="sex" label="性别"></el-table-column>
<el-table-column :sort-method="(a,b)=>{return a.age - b.age}" align="center" sortable prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "小红",
sex: "女",
age: "21",
},
{
name: "小兰",
sex: "女",
age: "6",
},
{
name: "小美",
sex: "女",
age: "18",
},
{
name: "小蓝",
sex: "女",
age: "32",
},
],
};
},
};
</script>
动态表头时
上面我们演示的前端写死的表头,但有些场景可能表头都是后台数据返回的,那么这种情况该怎么进行排序呢,大家可以参考下面的代码。
<template>
<div>
<el-table stripe :data="tableData" border style="width: 100%">
<el-table-column align="center" v-for="(item, index) in headData" :key="index" :prop="item.indexCode" :label="item.label" sortable
:sort-method="(a, b) => {return a[item.indexCode] - b[item.indexCode]}">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟表头数据
headData: [
{
indexCode: "age",
label: "年龄",
},
],
// 模拟表格数据
tableData: [
{
age: "19",
},
{
age: "32",
},
{
age: "22",
},
{
age: "15",
},
],
};
},
};