網站首頁 編程語言 正文
首先我們看tabledata的返回數據,里面僅包含了單獨的列名與每行(rows)的數據,此時我們需要對每列數據進行排序,但我們可操作的僅有rows每行數據,這點要搞清,不用去篩選出來列數據,直接對行數據進行操作
需要考慮兩種情況,初始tabledata進行排序與tabledata篩選過之后的filterdata再排序
簡單來說就是一次篩選與篩選再篩選
- 正序A-Z
- 倒序Z-A
this.rows代表需要篩選的行數據(在初始化時可以拿到)
@change="change"用于el-select變化時拿到值
sort方法對于含有標點符號的字段和中英文混雜的字段不生效
<!-- 排序氣泡框 -->
<el-popover placement="bottom" title="設置排序條件" width="380" trigger="click">
<el-select v-model="groupList.value1" placeholder="請選擇" size="small" @change="change">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button-group style="margin-left: 10px">
<el-button type="primary" size="small" @click="upOrder">升序</el-button>
<el-button type="primary" size="small" @click="downOrder">降序</el-button>
</el-button-group>
<el-button type="text" icon="el-icon-delete" style="font-size: 16px; margin-left: 10px"
@click="deleteOption"></el-button>
<el-button type="text" :underline="false" slot="reference">排序</el-button>
</el-popover>
//定義
name:'',//用于裝el-select 選擇后的e
rows: [],//用于裝行數據
filterData:[]//篩選后的數據
//方法
change(e) {
this.name = e;
},
//取消排序恢復原樣
deleteOption() {
//把最初的tabledata賦值給originalValue
this.tableData = this.originalValue
},
// 升序
upOrder() {
if (!this.filterData) {
this.tableData = [];
this.rows.sort((a, b) =>
a.values[this.name] > b.values[this.name] ? 1 : -1
);
for (let i = 0; i < this.rows.length; i++) {
this.tableData.push({ rowId: this.rows[i].id, ...this.rows[i].values });
}
} else {
this.filterData.sort((a, b) => a[this.name].localeCompare(b[this.name]));
}
},
// 降序
downOrder() {
if (!this.filterData) {
this.tableData = [];
this.rows.sort((a, b) =>
a.values[this.name] < b.values[this.name] ? 1 : -1
);
for (let i = 0; i < this.rows.length; i++) {
this.tableData.push({ rowId: this.rows[i].id, ...this.rows[i].values });
}
}else {
this.filterData.sort((a, b) => b[this.name].localeCompare(a[this.name]));
}
},
原文鏈接:https://blog.csdn.net/Ybittersweet/article/details/129851052
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2022-03-22 docker安裝RabbitMQ詳細步驟_docker
- 2023-04-01 C++11中強類型枚舉的使用_C 語言
- 2023-01-17 怎樣保存模型權重和checkpoint_python
- 2023-02-12 如何用C++求兩個數的最大公約數和最小公倍數_C 語言
- 2022-07-09 Docker網絡介紹
- 2022-03-15 React?Router?V6更新內容詳解_React
- 2023-03-27 Python中元組的概念及應用小結_python
- 2022-10-27 樹莓派4B更換清華源和沒有公鑰報錯
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支