处理VUE框架中,ElementUI控件u-table空值排序问题

按照以下步骤进行操作:

  1. 分离数据 :首先,将原始数据按照username为空和非空进行分类。
  2. 对非空表进行排序 :对非空表按照username进行升序排序。
  3. 合并表格:将空表和排序后的非空表合并,保证空表挂接在排序后的非空表后面。
  4. 赋值给tableData :将合并后的结果赋值给tableData
  5. 实现代码如下:

<template>

<el-table :data="tableData">

<el-table-column label="Username" prop="username"></el-table-column>

<el-table-column label="Other Data" prop="otherData"></el-table-column>

<!-- 其他列 -->

</el-table>

</template>

<script>

export default {

data() {

return {

// 原始数据(假设是从接口获取或定义的)

originalData: [

{ username: 'Alice', otherData: 'Data 1' },

{ username: '', otherData: 'Data 2' },

{ username: 'Bob', otherData: 'Data 3' },

{ username: '', otherData: 'Data 4' },

{ username: 'Charlie', otherData: 'Data 5' },

// ...更多数据

],

tableData: [] // 最终显示的表格数据

};

},

methods: {

processData() {

// 1. 分离空表和非空表

const emptyUsernameData = this.originalData.filter(item => item.username === '');

const nonEmptyUsernameData = this.originalData.filter(item => item.username !== '');

// 2. 对非空表按照 username 进行升序排序

const sortedNonEmptyData = nonEmptyUsernameData.sort((a, b) => {

return a.username.localeCompare(b.username);

});

// 3. 合并非空表和空表

this.tableData = [...sortedNonEmptyData, ...emptyUsernameData];

}

},

created() {

// 在组件加载时处理数据

this.processData();

}

};

</script>

相关推荐
林太白12 分钟前
NestJS-角色模块
前端·javascript·nestjs
种豆走天下15 分钟前
VUE进阶案例
前端·javascript·vue.js
陈随易20 分钟前
盘点微信开发者工具V1和V2的区别
前端·后端·程序员
zengyuhan50322 分钟前
使用Rust 串口通信 及 MTP文件获取
前端·rust
小宋搬砖第一名24 分钟前
阿里云部署小白教程
前端
陈随易26 分钟前
ECharts v6.0发布,新布局,新主题,新功能
前端·后端·程序员
HHW27 分钟前
更快更强的 JavaScript 运行时:Bun 入门与实践指南
前端·javascript
好奇心笔记32 分钟前
现代Web开发最佳实践:2025年前沿技术与工程化指南
前端
小宁爱Python33 分钟前
Vue3 状态管理新选择:Pinia 从入门到实战
前端·javascript·vue.js
培根芝士1 小时前
使用 Canvas 替代 <video> 标签加载并渲染视频
前端·javascript·音视频