element ui table表格属性排序问题sort-change
//此处的Key不确定是干啥的~
<el-table :key="tableKey"
//v-loading是用于显示表格中是否在数据请求时显示正在加载中，一般是数据请求时显示，数据请求后不显示
v-loading="listLoading"
//data是表格中的数据
:data="list"
//表格的高度
:height="screenHeight"
//监听属性排序的方法
@sort-change="sortChange"
//表格中数据加载时，显示的文字可以进行自定义
element-loading-text="正在努力加载中..."
//表格的边框
border
//表格中宽度是否自动撑开
fit
//表格中的当前行是否高亮显示
highlight-current-row
//表格显示css样式，比如设置宽度
style="width: 100%">
//此列为序号，label标签 type是自定义的序号为Index,align是居中/靠左/靠右,show-overflow-tooltip是指：当内容过长被隐藏是显示tooltip，width就是设置宽度
<el-table-column
label="序号"
type="index"
align="center"
show-overflow-tooltip
width="50">
</el-table-column>
//此列中的sortable prop都是为了属性排序
<el-table-column :label="'ID'" align="center" width="164px" :sortable="'custom'" prop="ID">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
</el-table>
//上方代码中的height,也就是表格的高度是通过页面自动计算出来的，在data中有说明。
data(){
return{
screenHeight: `${document.documentElement.clientHeight}` - 242,
}
}
//以下代码放在methods中
sortChange(column) {
//打印看看参数有哪些？
console.log('排序', column.prop, column.order);
//排序默认是从第一页开始
this.listQuery.page = 1;
//排序的字段是属性名
this.listQuery.param.sort = column.prop;
//排序的方式是根据上下选择来确定
this.listQuery.param.asc = (column.order == 'ascending' ? true : false);
//此方法为获取数据的方法
this.getPage();
},
getPage() {
//表格加载中~
this.listLoading = true;
//调用Page接口，传递参数，
page(this.listQuery).then(response => {
this.list = response.result.data;
this.total = response.result.total;
//隐藏加载中~
this.listLoading = false;
});
}