挨踢老王
🏃♂️人生之路，难免坎坷，但我执着
网站页面
element sortable配合后端排序的使用
07/22
<el-table
:data="tableData"
:header-cell-style="headClass"
style="width: 100%; margin: 10px 0 0 0"
@sort-change="sortChange"
>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="releaseUnit" label="发布单位">
</el-table-column>
<el-table-column
prop="warningTypeName"
label="预警类型"
></el-table-column>
<el-table-column
prop="warningLevel"
label="预警等级"
sortable="custom"
>
<template slot-scope="scope">
<span>{{ warningLevelArr[scope.row.warningLevel] }}</span>
</template>
</el-table-column>
<el-table-column prop="warningDescribe" label="预警描述">
</el-table-column>
<el-table-column
prop="warningTime"
label="预警发布时间"
sortable="custom"
width="150"
>
</el-table-column>
<el-table-column
prop="warningStartTime"
label="预警开始时间"
sortable="custom"
width="150"
>
</el-table-column>
<el-table-column
prop="warningEndTime"
label="预警结束时间"
sortable="custom"
width="150"
>
</el-table-column>
<el-table-column prop="warningUploadUnit" label="预警上传单位">
</el-table-column>
<el-table-column prop="warningUploadUser" label="预警上传人">
</el-table-column>
<el-table-column
prop="lockoutDays"
label="停工天数"
sortable="custom"
>
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="240">
<template slot-scope="scope">
<el-button
class="T-R-B-Orange"
size="mini"
@click="detailClick(scope.row)"
>详情</el-button
>
<!-- && scope.row.isHandle -->
<el-button
v-if="scope.row.handleStatus == 0"
class="T-H-B-DarkBlue"
size="mini"
@click="handleClick(scope.row, 1)"
>处理</el-button
>
<el-button
v-if="
scope.row.warningEndTime == null &&
scope.row.isEnd &&
scope.row.handleStatus == 0
"
class="T-H-B-DarkGreen"
size="mini"
@click="handleClick(scope.row, 2)"
>结束预警</el-button
>
</template>
</el-table-column>
</el-table>js代码
methods: {
sortChange(column) {
console.log(column);
if (column.prop == null || column.order == null) {
this.searchForm.sortParam = "";
this.searchForm.sortType = "";
} else {
if (column.order == "ascending") {
this.searchForm.sortType = "asc";
} else {
this.searchForm.sortType = "desc";
}
this.searchForm.sortParam = column.prop;
}
this.getTableData();
},
}注意：通过getTableData()方法把参数传递到后端，然后后端实现排序功能。
