【el-table】表格后端排序

以对_2024-12-04 21:49

在需要排序的列添加属性 sortable，后端排序，需将sortable设置为custom

如果需要自定义轮转添加 sort-orders 属性，数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序

html 复制代码

 <el-table v-loading="loading" :data="form.itemList" @selection-change="handleSelectionChange" @sort-change="handleSortChange" max-height="550">
    <el-table-column type="selection" width="50" align="center"/>
    <el-table-column label="行号" align="center" key="vrowNo" prop="vrowNo"/>
    <el-table-column label="产品编码" width="150" align="center" key="materialId" prop="materialId" sortable="custom" :sort-orders="['descending', 'ascending',null]"/>
    <el-table-column label="产品名称" width="200" align="center" key="materialName" prop="materialName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending',null]"/>
</el-table>

js 复制代码

/** 排序触发事件 */
handleSortChange(column, prop, order) {
  this.queryParams.orderByColumn = column.prop;
  this.queryParams.isAsc = column.order
  
  this.getList();
},