点击列名进行进行排序功能
1.JS中为每一列设置【sortable:true】
代码语言：javascript复制const columns = [
{ label: 'Name', fieldName: 'name', type: 'text', sortable: true },
{ label: 'Email', fieldName: 'email', type: 'text', sortable: true },
{ label: 'Phone', fieldName: 'phone', type: 'text', sortable: true },
{ label: 'OwnerName', fieldName: 'ownerName', type: 'text', sortable: true },
{ label: 'Birthdate', fieldName: 'birthdate', type: 'date', sortable: true },
];2.Html
代码语言：javascript复制<lightning-datatable
show-row-number-column
max-row-selection="1"
onrowselection={handelSelection}
key-field="id"
data={records}
columns={columns}
default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={onHandleSort}>
</lightning-datatable>3.Js排序事件
代码语言：javascript复制@track defaultSortDirection = 'asc';
@track sortDirection = 'asc';
@track sortedBy;
onHandleSort(event) {
const { fieldName: sortedBy, sortDirection } = event.detail;
const cloneData = [...this.records];
cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
this.records = cloneData;
this.sortDirection = sortDirection;
this.sortedBy = sortedBy;
}
sortBy(field, reverse, primer) {
const key = primer
? function (x) {
return primer(x[field]);
}
: function (x) {
return x[field];
};
return function (a, b) {
a = key(a);
b = key(b);
return reverse * ((a > b) - (b > a));
};
}4.效果展示
