antdvue table 通过代码更改defaultSortOrder从descend改为asend 高亮按钮不变
时间: 2024-02-21 14:02:07 浏览: 132
Ant Design的Table组件去除
可以通过以下方式更改antdvue table的defaultSortOrder属性:
1. 在表格组件中添加defaultSortOrder属性,并将其设置为'ascend',如下所示:
```
<a-table :columns="columns" :data-source="data" default-sort-order="ascend"></a-table>
```
2. 如果表格中已经存在排序的按钮,则需要手动更改按钮的样式,以确保与更改后的默认排序顺序相匹配。可以在按钮上添加一个v-if指令,根据defaultSortOrder属性的值来判断是否应该添加高亮样式,如下所示:
```
<a-table-column title="Name" dataIndex="name" :sorter="true">
<template slot="customRender" slot-scope="{ text, record, index }">
<span v-if="defaultSortOrder==='ascend'" :class="{ 'ant-table-column-sorter-up': true, 'on': sort.columnKey === 'name' && sort.order === 'ascend' }" @click="handleSort('name', 'ascend')"></span>
<span v-else :class="{ 'ant-table-column-sorter-down': true, 'on': sort.columnKey === 'name' && sort.order === 'descend' }" @click="handleSort('name', 'descend')"></span>
{{ text }}
</template>
</a-table-column>
```
在上述代码中,根据defaultSortOrder属性的值,分别添加了高亮的升序和降序按钮,并且在点击按钮时调用了handleSort方法来更改排序顺序。同时,根据sort.columnKey和sort.order的值来判断当前应该高亮哪个按钮。
阅读全文