element-ui table排序sortable三种状态，怎么去掉默认状态

最新推荐文章于 2025-03-11 10:45:27 发布

qq_36437172

最新推荐文章于 2025-03-11 10:45:27 发布

阅读量3.7w

点赞数 7

分类专栏： element-ui 文章标签： element-ui table排序 sortable 三种状态默认状态

本文链接：https://blog.csdn.net/qq_36437172/article/details/86166481

版权

element-ui 专栏收录该内容

44 篇文章

订阅专栏

本文详细解析了Element-UI中表格排序的实现方式，包括sort-orders的三种状态：ascending、descending、null，以及如何通过@sort-change事件监听排序变化，并调整排序接口的调用。同时介绍了default-sort属性的使用，帮助开发者更好地理解和应用Element-UI的表格组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在调用table 排序时，出现排序有三种状态：

在 element-ui 中，也定义了 sort-orders 有三种状态： ascending、descending、null，这三种状态形成一个循环切换。

案例如下：

<el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%;cursor: pointer;"
    :default-sort = "{prop: 'name', order: 'ascending'}"
    @sort-change="handleSortChange"> 
    <el-table-column
      label="上次更新"
      prop="last_modification_times"
      sortable
      width="100">
    </el-table-column> 
</el-table>

@sort-change 事件：表格的排序条件发生变化的时触发，参数 { column, prop, order }, 分别代表的意义是：

column：当前列

prop：当前列需要排序的数据

order：排序的规则（升序、降序和默认[默认就是没排序]）

handleSortChange(val) {
  if(val.column){
    this.sortOrder = val.order == 'ascending'? 2 : 1
    this.sortField = val.prop == 'name'? 2 : 1
    //调用排序接口
  }
  // this.$refs.multipleTable.clearSort()
},

default-sort属性：

更新 2021.02.17

element-ui 官网现在提供了 sortable 参数：对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件。

sort-orders：数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序。数组中的元素需为以下三者之一：ascending表示升序，descending表示降序，null 表示还原为原始顺序。如果不想要默认状态，那只需配置 ['ascending', 'descending'] 即可。