处理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>

相关推荐
满分观察网友z几秒前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠2 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z3 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构9 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙15 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1117 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆21 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er25 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0629 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444031 分钟前
javaweb———html
前端·javascript·html