el-table-column的根据日期字符串排序
时间: 2023-05-23 18:03:47 浏览: 55
要想根据日期字符串对 el-table-column 进行排序,可将该列的 type 属性设置为 'date',然后构造一个计算日期的函数,在 sortMethod 中使用该函数即可。下面是一个示例代码:
```html
<el-table-column prop="date" label="日期" type="date" :sortable="true" :sort-method="customSortMethod"></el-table-column>
```
```javascript
methods: {
customSortMethod(a, b) {
// 将日期字符串转换为毫秒数进行比较
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
}
```
这样就可以让 el-table-column 根据日期字符串进行排序了。
相关问题
vue2 el-table-column 接口排序实现
在 Vue2 中,el-table-column 接口的排序功能实现与 Vue3 类似,也是通过 sort-method 属性来实现的。以下是一个简单的示例:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column>
<el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 25 },
{ name: 'Charlie', age: 18 }
]
};
},
methods: {
sortByName(a, b) {
return a.name.localeCompare(b.name);
}
}
};
```
在上面的示例中,我们给第一个 el-table-column 添加了 sort-method 属性,并将其绑定到一个名为 sortByName 的方法上。这个方法使用 String.prototype.localeCompare() 方法来比较两个字符串的大小关系,从而实现按照姓名排序的功能。第二个 el-table-column 没有指定 sort-method 属性,因此默认按照数字大小排序。
需要注意的是,sort-method 只能用于排序,而不能用于筛选。如果需要筛选功能,可以使用 el-table-column 的 filters 属性配合 filter-method 实现。另外,还需要在 el-table 上添加 :default-sort 属性来指定默认排序的列和排序方式。例如:
```html
<el-table :data="tableData" :default-sort="{ prop: 'age', order: 'descending' }" style="width: 100%">
<el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column>
<el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>
```
在上面的示例中,我们通过 :default-sort 属性指定了默认按照年龄倒序排序。
el-table-column 接口排序实现
el-table-column 接口提供了 sort-method 属性,可以用来实现排序功能。sort-method 是一个函数,接收两个参数,分别是待比较的两个单元格的值,返回一个数字表示它们的大小关系,即:
- 如果返回值小于 0,表示第一个值应该排在第二个值前面;
- 如果返回值等于 0,表示两个值相等;
- 如果返回值大于 0,表示第一个值应该排在第二个值后面。
以下是一个简单的示例:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column>
<el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 25 },
{ name: 'Charlie', age: 18 }
]
};
},
methods: {
sortByName(a, b) {
return a.name.localeCompare(b.name);
}
}
};
```
在上面的示例中,我们给第一个 el-table-column 添加了 sort-method 属性,并将其绑定到一个名为 sortByName 的方法上。这个方法使用 String.prototype.localeCompare() 方法来比较两个字符串的大小关系,从而实现按照姓名排序的功能。第二个 el-table-column 没有指定 sort-method 属性,因此默认按照数字大小排序。
需要注意的是,sort-method 只能用于排序,而不能用于筛选。如果需要筛选功能,可以使用 el-table-column 的 filters 属性配合 filter-method 实现。