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

相关推荐
β添砖java5 分钟前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome
YiHanXii7 小时前
this 输出题
前端·javascript·1024程序员节
楊无好7 小时前
React中ref
前端·react.js
程琬清君7 小时前
vue3 confirm倒计时
前端·1024程序员节