vue2+elementui项目中的el-table表格 升序降序不正确 怎么能让按列内容的字符串数字大小排序呢
时间: 2024-02-01 11:14:01 浏览: 154
可以使用 `sort-method` 属性来定义一个自定义的排序方法。具体步骤如下:
1. 在 `el-table-column` 中添加 `sort-method` 属性,将其值设置为一个自定义的排序函数。
2. 自定义的排序函数应该接收两个参数,分别是要比较的两个值,然后返回一个数字,表示它们的大小关系。
3. 在排序函数中,可以使用 `parseInt` 函数将字符串转换为数字进行比较,也可以使用其他的比较方法。
以下是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" sortable :sort-method="sortByName"></el-table-column>
<el-table-column prop="age" label="年龄" sortable :sort-method="sortByAge"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 25 }
]
}
},
methods: {
sortByName(a, b) {
return a.name.localeCompare(b.name)
},
sortByAge(a, b) {
return parseInt(a.age) - parseInt(b.age)
}
}
}
```
在上面的代码中,我们定义了一个按照姓名排序的方法 `sortByName` 和一个按照年龄排序的方法 `sortByAge`。在 `el-table-column` 中,我们将它们分别赋值给了 `sort-method` 属性。这样就可以在表格中按照姓名和年龄进行正确的排序了。
阅读全文