vue+element-ui table表格前端自定义排序
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
//表格自定义排序 @sort-change='sortChange'
<el-table
:data="tableData1"
style="width: 100%"
v-loading="loading"
id="table"
:header-cell-style="{background:'#fafafa'}"
@sort-change='sortChange'
>
//sortable="'custom'"表示自定义排序
<el-table-column prop="mobileCrashId" label="ID" width="80px" sortable="'custom'"></el-table-column>
</table>
获取后端返回的数据:
const getTableData = async() =>{
let res = await requestApi.crashApi.post({...params})
tableData.value = res
tableData2.value = res
total.value = res.length
//分页展示数据
if(res.length>10){
tableData1.value = res.slice(0,pageSize4.value)
} else{
tableData1.value = res
}
loading.value = false
}
自定义排序操作:
const tableData = ref([]); //表格操作数据
const tableData1 = ref([]); //表格展示数据
const tableData2 = ref([]); //后端返回的数据
// 排序
const sortChange = (column) =>{
//column.prop表示table每一列绑定的prop
//column.order升序或者降序 descending/ascending
tableData.value = search(column.prop, column.order)
//结合前端分页实现
tableData1.value = tableData.value.slice(0,pageSize4.value)
currentPage4.value = 1; // 排序后返回第一页
}
const search=(sortName,sortValue)=>{
const data = JSON.parse(JSON.stringify(tableData.value)).slice();
/** sort data **/
if (sortName && sortValue) {
return data.sort((a, b) =>
sortValue === 'ascending'
? Number(a[sortName]) > Number(b[sortName])
? 1
: -1
: Number(b[sortName]) > Number(a[sortName])
? 1
: -1
);
} else {
//不排序时返回的是从后端获取回来的数据
return tableData2.value;
}
}
前端分页操作:
// 前端分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
// 总数据
const total = ref(0);
const handleSizeChange = (p) => {
pageSize4.value = p;
currentPage4.value = 1;
const end = currentPage4.value * p;
const data = JSON.parse(JSON.stringify(tableData.value)).slice(
tableData.value.length > p ? end - p : 0,
end
);
tableData1.value = data;
};
const handleCurrentChange = (p) => {
console.log(JSON.parse(JSON.stringify(tableData.value)),'pppp');
currentPage4.value = Math.ceil(p);
const end = Math.ceil(p) * pageSize4.value;
const data = JSON.parse(JSON.stringify(tableData.value)).slice(end - pageSize4.value, end);
tableData1.value = data;
};
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)