element-UI：el-table 表格排序

最新推荐文章于 2025-07-02 10:39:27 发布

对，我

最新推荐文章于 2025-07-02 10:39:27 发布

阅读量4.9k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_44209082/article/details/119185075

本文介绍了如何在Vue项目中使用element-UI的el-table组件实现表格的自定义排序功能。通过监听@sort-change事件和设置:sortable='custom'属性，可以控制表格列的升序和降序排列。

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

element-UI：el-table 表格排序

需求：el-table 需要支持排序，即点击当前列头实现排序。
最终实现效果：在这里插入图片描述
html 部分：

1.给el-table设置事件 @sort-change=“sortChange”
2.给需要排序的表格列设置属性 :sortable="‘custom’"

<el-table 
      v-loading="tabLoading"
      :data="tableData"
      :header-cell-style="entityHeaderClass"
      :element-loading-text="$t('common.loading')"
      element-loading-background="rgba(255, 255, 255, 0.75)"
      stripe
      :height="listenTableHeight + 'px'"
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column 
        :sortable="'custom'" 
        prop="customer_num" 
        label="客户编号" 
        align="center"
      >
      </el-table-column>
</el-table>

@sort-change 事件官网解释如图：

在这里插入图片描述
js 部分：

prop：排序那列表格的字段名
order：排序的方式 ascending == 升序 descending == 降序 null == 不排序

data() {
	return {
	  tabSort: 0, //该字段代表升序还是降序 假设：0正序 1倒序
	  tabProp: '' //prop绑定的字段名
	}
},
sortChange(column){
	// 当前列的排序  ascending 升序 descending 降序 
	if (column.order == "ascending") {
	  this.tabSort = 0
	} else if (column.order == "descending") {
	  this.tabSort = 1
	} else {
	  this.tabSort = 0
	}
	// 当前点击列名
	this.tabProp = column.prop
	this.pagenum = 1
	// 调后端接口，把后端需要的参数传递给后端，就可以实现排序
	this.GetMembersPagination()
}