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

相关推荐
一大树10 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐15 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机27 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星28 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构30 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚30 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin31 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45333 分钟前
React项目(移动app)
前端
用户618482402195134 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队1 小时前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端