排序(尝试对时间戳做排序)

案例1(时间戳排序)

<template><view class=""><text @tap="shijian">打印一下</text></view>
</template>
<script>
export default {data() {return {list: [{"createDate": "12月06日","orderNum": "23","sales": "631.60"}, {"createDate": "12月08日","orderNum": "1","sales": "0.02"}, {"createDate": "12月07日","orderNum": "1","sales": "12.02"}, {"createDate": "12月05日","orderNum": "1","sales": "2.03"}]}},methods: {shijian(){this.list.sort((a,b)=>{let aTimeS=a.createDatelet bTimeS=b.createDateaTimeS=aTimeS.replace(/月/g,'-') //将'月' 替换为 '-'  即12-05bTimeS=bTimeS.replace(/月/g,'-')let aTimeSS=aTimeS.replace(/日/g,'')let bTimeSS=bTimeS.replace(/日/g,'')let aTime=new Date(aTimeSS).getTime()//转换为距1970年的毫秒let bTime=new Date(bTimeSS).getTime()return bTime -aTime  //降序排列})console.log('this.list.',this.list)},}
}
</script>

心得：朋友想对后端返回的数据，按照时间高低的进行排序渲染，由于返回的数据是无序的，所以需要前端做下排序。于是我尝试，forEach将月、日字段去除，生成临时数组做排序，但是过程有点复杂费脑子。方法是网上搜了下，结合自身实际情况实现的。这里的方法，重点在于:new Date(aTimeSS).getTime() 最终放入的 aTimeSS, 你可以放入如2022-12-05 12:22 或是像我传入12-05。最终排序是通过转毫秒实现升降的。

案例2（权重排序）（此案例引入了element库组件，通过插件Sortable实现排序）

<template><div class="bg_color"><div><div class="cententReport"><span>手动排序游戏</span></div><div class="paixu"><div class="paixu_left"><div class="paixu_head">已添加的游戏({{ tableData2.length }})</div><div class="paixu_center"><el-selectv-model="value"clearableplaceholder="请选择"style="width: 190px"><el-optionv-for="item in options":key="item.gcId":label="item.name":value="item.gcId"></el-option></el-select><el-inputv-model="input"placeholder="请输入游戏名称"style="margin: 0 20px"clearable></el-input><el-button type="primary" @click="editing_search('1')">查询</el-button></div><div><el-tablesize="small"style="width: 100%; height: 290px; overflow-y: scroll":header-cell-style="{background: '#F6F8FB',color: '#333333',fontSize: '14px',}":data="tableData2"borderalign="left"><template slot="empty"><img src="../../../assets/img/channel/zwu.png" alt="" /><div>~暂无数据~</div></template><el-table-columnshow-overflow-tooltipalign="center"v-for="(item, index) in col":key="`col_${index}`":prop="col[index].prop":label="item.label"><template slot-scope="scope"><p>{{ scope.row[item.prop] }}</p><p v-if="item.label === '操作'"><el-button@click="gameDelete(scope.row)"type="text"size="small">删除</el-button></p></template></el-table-column></el-table></div></div><div class="jiantou"><i class="el-icon-d-arrow-left"></i></div><div class="paixu_left"><div class="paixu_head">所有游戏</div><div class="paixu_center"><el-selectv-model="value2"clearableplaceholder="请选择"style="width: 190px"><el-optionv-for="item in options":key="item.gcId":label="item.name":value="item.gcId"></el-option></el-select><el-inputv-model="input2"placeholder="请输入游戏名称"style="margin: 0 20px"clearable></el-input><el-button type="primary" @click="editing_search('2')">查询</el-button></div><div><el-tablesize="small"style="width: 100%; height: 290px; overflow-y: scroll":header-cell-style="{background: '#F6F8FB',color: '#333333',fontSize: '14px',}":data="tableData3"borderalign="left"><template slot="empty"><img src="../../../assets/img/channel/zwu.png" alt="" /><div>~暂无数据~</div></template><el-table-columnshow-overflow-tooltipalign="center"v-for="(item, index) in col":key="`col_${index}`":prop="col[index].prop":label="item.label"><template slot-scope="scope"><p>{{ scope.row[item.prop] }}</p><p v-if="item.label === '操作'"><el-button@click="gameAdd(scope.row)"type="text"size="small">添加</el-button></p></template></el-table-column></el-table></div></div></div><div class="footer2"><el-button type="primary" @click="editing_keep">保存</el-button></div></div><div><div class="cententReport"><span>编辑</span></div><div class="details_list"><el-tableborder:data="tableData":header-cell-style="{background: '#F6F8FB',color: '#333333',width: '100%',fontSize: '14px',}"><template slot="empty"><div>~暂无数据~</div></template><el-table-column prop="title" label="栏目名称" align="center"></el-table-column><el-table-column label="栏目状态" align="center" min-width="180"><template slot-scope="scope"><el-radio-group v-model="scope.row.isHide"><el-radio :label="1" v-model="radioel">可见</el-radio><el-radio :label="2" v-model="radioel">隐藏</el-radio></el-radio-group></template></el-table-column><el-table-column prop="number" label="栏目显示" align="center"></el-table-column></el-table></div></div></div>
</template>
<script>
import {getInfo,addedGameList,getGameList,update,gamegetClassList,
} from "../../../service/liangzhuopan";
import Sortable from "sortablejs";
export default {name: "PromoterDetails",components: {Sortable,},data() {return {token: sessionStorage.getItem("token"),channelId: this.$route.query.channelId,tableData: [], //推广员列表数据tableData2: [],tableData3: [],radioel: "", //是否隐藏 1显示 2隐藏value: "", //已添加，下拉框值value2: "", //所有游戏，下拉框值input: "", //已添加，游戏名称input2: "", //未添加，游戏名称options: [],columnId: this.$route.query.id, //路由接收栏目idgameIds: [],gameIds2: [],videoListarr: [],col: [{label: "游戏ID",prop: "gameId",},{label: "游戏名称",prop: "gameName",},{label: "游戏类别",prop: "gameType",},{label: "操作",prop: "isClick",},],};},created() {this.gamegetClassList();this.getInfoList();this.getaddedGameList();this.getGameListorde();},computed: {},methods: {// 栏目游戏类型gamegetClassList() {let parmas = {token: this.token,channelId: this.channelId,};gamegetClassList(parmas).then((res) => {if (res.data.code == 0) {this.options = Object.values(res.data.data);}});},// 渠道-栏目信息列表getInfoList() {let parmas = {token: this.token,channelId: this.channelId,columnId: this.columnId, //栏目id};getInfo(parmas).then((res) => {if (res.data.code == 0) {this.tableData.push(res.data.data);}});},// 栏目已添加游戏列表getaddedGameList() {console.log("value", this.value);let parmas = {token: this.token,channelId: this.channelId,columnId: this.columnId, //栏目idgameName: this.input,type: this.value,};addedGameList(parmas).then((res) => {if ((res.data.code == 0) & (res.data.data.length > 0)) {this.tableData2 = res.data.data;this.IndexT();} else {this.tableData2 = [];}});},// 栏目待添加游戏列表getGameListorde() {let parmas = {token: this.token,channelId: this.channelId,gameName: this.input2,type: this.value2,};getGameList(parmas).then((res) => {if (res.data.code == 0) {if (Object.keys(res.data.data).length > 0) {this.tableData3 = res.data.data;} else {this.tableData3 = [];}}});},// 编辑选中gameAdd(val) {console.log("编辑添加", val);let index = this.gameIds.indexOf(`${val.gameId}`); //判断这个 字段，是否已经被数组存有if (index == -1) {//没存，那么存入它this.gameIds.unshift(`${val.gameId}`);}if (this.tableData2.length > 0) {try {//由于forEach不存在跳出循环，所以只能通过抛出异常来实现this.tableData2.forEach((item, index) => {let index2 = item.gameId == val.gameId ? "0" : "-1";if (index2 === "0") {throw Error();} else if (index == this.tableData2.length - 1) {if (index2 === "-1") {this.tableData2.unshift(val);}}});} catch (e) {}} else {this.tableData2.unshift(val);}},// 编辑删除gameDelete(val) {console.log("点击了游戏删除", val);let index = this.gameIds.indexOf(`${val.gameId}`);if (index > -1) {this.gameIds.splice(index, 1);}try {this.tableData2.forEach((item, index) => {let index2 = item.gameId == val.gameId ? "0" : "-1";if (index2 === "0") {this.tableData2.splice(index, 1);}});} catch (e) {}},// 生成index和新排序数组IndexT() {this.tableData2.forEach((item, index) => {item.index = this.tableData2.length - 1 - index;this.gameIds.push(`${item.gameId}`);});console.log("就想看下原始权重", this.gameIds);},// 查询游戏editing_search(val) {console.log("查询游戏");if (val == "1") {//已添加this.getaddedGameList();} else {//待添加this.getGameListorde();}},// 编辑保存editing_keep() {console.log("看下保存时", this.gameIds);let parmas = {token: this.token,channelId: this.channelId,columnId: this.columnId, //栏目IDtitle: this.tableData[0].title, //游戏栏目gameIds: this.gameIds, //游戏id数组集合isHide: this.radioel == "" ? this.tableData[0].isHide : this.radioel, //栏目可见性 1可见 2 隐藏};// returnconsole.log("看下列表编辑前长啥", this.tableData2);console.log(parmas, "编辑保存的数据");update(parmas).then((res) => {if (res.data.code == 0) {this.tableData = [];this.gameIds = [];this.gamegetClassList();this.getInfoList();this.getaddedGameList();this.getGameListorde();}});},rowDrop() {let el = document.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];const sortable = Sortable.create(el, {onEnd: (evt) => {// 监听拖动结束事件console.log("evt", evt);let x = evt.item.__vue__._props.row;console.log("当前这行数据的游戏Id", x);console.log("这条数据的新下标", evt.newIndex);this.paixu(x, evt);},});// Sortable.create(tbody);},// 排序paixu(x, evt) {// 新思路// 由于获取的新权重位置，改写原始数组时会触动虚拟dom// 所以，我不再对原始数据做操作// 而是直接操作事先存储的  权重数组// 在进行  排序时，拖拽将获取到该行新数据的所有// 这里存在着坑// 第一个，当我获取到新数据的gameId和新下标，该怎么排给权重数组// 最初我 是对原始数据做冒泡，但会触动dom  pass// 现在，我打算换一种形式。不再使用冒泡来实现// 权重数组由来，通过  原始数据生成的。即，后端返回的真实数据// 真实数据里，存入了我创建的权重字段  index,而index则是由(数据下标<=0) 高到 (数据下标>0)低形式// 以此，来展示，其实并没有触动原始数据// 而遍历时，将gameId+index存入数组gameIds是没有问题的// 0: "3"  //右侧的值是gameId// 1: "2"  //左侧的值是下标(也作权重使用)// 2: "1"// 真实拖拽时，获取下标的同时，我将获取到gameId// 这时只需要对比 右侧的值即可 得到这条数据的最新位置// 新位置有了，那么插入势必会影响旧的位置// 故：拖拽后，若gameId的index没有变化，则不做删除操作// 否则：删除指定位置的gameId  在新的下标位置插入gameId// 至此，权重数组数据正常// 隐患：删除某条数据时，是否要原始数组做操作？？// 解决：最初，我的做法是对原始数据做操作，但存在隐患 触动虚拟dom// 考虑：如何不触动dom的前提下删除？？// (好吧，由于插件的虚拟dom是根据实体数据来渲染的，如果不删除原始数据的该条数据，实际上是不能实现同步的)// 至少我还做不到...let newDeta = this.gameIds;this.gameIds.forEach((item, index, array) => {if (this.gameIds[index] == x.gameId && index != evt.newIndex) {let ccc = this.gameIds[evt.newIndex];// 存在排序往上与往下两种if (evt.newIndex < index) {this.gameIds.splice(evt.newIndex, 1, item); //删除旧值this.gameIds.splice(evt.newIndex + 1, 1, ccc); //改写被替换的那行for (let i = 0; i < newDeta.length; i++) {console.log("i", i);if (index > 0 && i > index + 1) {this.gameIds[index] = newDeta[i];}// if (this.gameIds.length == i + 1) {//   console.log("排序便利上增结束1", this.gameIds);// }}} else {this.gameIds.splice(evt.newIndex, 1, item); //删除旧值this.gameIds.splice(evt.newIndex - 1, 1, ccc); //改写被替换的那行for (let i = 0; i < newDeta.length; i++) {if (index > 0 && i > index + 1) {this.gameIds[index] = newDeta[i + 1];}// if (this.gameIds.length == i + 1) {//   console.log("排序便利下降结束1", this.gameIds);// }}}if (this.gameIds.length == index + 1) {console.log("排序便利结束2", this.gameIds);}}});},},mounted() {this.rowDrop();},watch: {},
};
</script>
<style lang="less" scoped>
.home {width: 1200px;margin: 0 auto;
}
.bg_color {height: 100%;border-radius: 16px;box-shadow:none;background: #fff;display: flex;flex-direction: column-reverse; //颠倒排列  将盒子以下上形式排布分列align-content: end;justify-content: flex-end;
}
.cententReport {padding: 30px 24px 40px 24px;font-size: 20px;font-weight: 400;color: #333333;
}.details_list {padding: 0px 30px 20px 30px;
}.paixu {padding: 0px 30px 20px 30px;display: flex;flex-direction: row;justify-content: space-around;align-content: center;.paixu_left {width: 40%;text-align: center;.paixu_head {background: #f6f8fb;padding: 10px;font-size: 16px;}.paixu_center {margin: 10px 0;display: flex;flex-direction: row;}}.jiantou {display: flex;align-items: center;i {font-size: 150px;align-items: center;}}
}.footer2 {padding: 20px 0px 30px 20px;display: flex;flex-direction: row;justify-content: center;
}
</style>

代码量还是蛮多的，抽空简化一下，由于是初次使用Sortable，相当生熟。

但不管怎么说，也算取到最新的权重了。在这里，之所以颠倒了某个盒子的排放，是由于该插件只对第一个element 的表格组件生效，存在缺陷。

排序(尝试对时间戳做排序)相关推荐

【得物技术】推荐系统是如何做排序的
引言信息时代到来以后,我们被各种各样海量的信息所淹没,从新闻.广告.电商.直播.短视频等各种涉及这些场景的APP中,大量个性化的信息被推送到我们眼前.例如在使用得物APP购物的过程中,我们也常常会听 ...
mysql使用索引扫描做排序_「Mysql索引原理（八）」使用索引扫描做排序
MySQL有两种方式可以生成有序的结果:通过排序操作:或者按索引顺序扫描:如果explain出来的type列的值为index,则说明MySQL使用了索引扫描来做排序. 扫描索引本身是很快的,因为只需要 ...
MySQL 如何利用做排序
利用索引优化排序:order by 单表查询: 索引列的顺序和order by的字句的顺序完全一样,并且所有列的排序方向都一样, MySQL才能使用索引对结果进行排序.order by 子句与查找型查 ...
短视频剪辑技巧分享，先做排序不能忘，观看效果会更佳
短视频剪辑技巧分享,先做排序不能忘,观看效果会更佳短视频剪辑学起来其实还是很简单的,只是如果想要成为剪辑大神,还是需要时间的磨炼,多多的剪辑作品,进行练习,并查扣补缺,了解一些短视频剪辑的小技巧,才 ...
VBA按列名称或是按表格标题给EXCEL表格做排序
VBA给EXCEL表格做排序按列名称或是按标题给表格排序按列名称或是按标题给表格排序在VBA编程时,经常会对表格内容进行排序,为了方便对不同需求下的内容排序,编制了下面这个函数,此函数可以根据给 ...
mysql通过订单量排序_mysql8 参考手册--通过排序优化
本节描述了MySQL何时可以使用索引满足ORDER BY子句,无法使用索引时使用的 filesort操作,以及有关优化程序的执行计划信息ORDER BY. 一个ORDER BY有和没有 LIMIT可能 ...
java对象排序_Java™ 教程（对象排序）
对象排序 List l可以如下排序. Collections.sort(l); 如果List包含String元素,它将按字母顺序排序,如果它由Date元素组成,它将按时间顺序排序,这是怎么发生的?St ...
数据结构（八）：排序 | 插入排序 | 希尔排序 | 冒泡排序 | 快速排序 | 简单选择排序 | 堆排序 | 归并排序 | 基数排序 | 外部排序 | 败者树 | 置换-选择排序 | 最佳归并树
文章目录第八章排序一.排序的基本概念 (一)什么是排序 (二)排序的应用 (三)排序算法的评价指标 (四)排序算法的分类 (五)总结二.插入排序 (一)算法思想 (二)算法实现 (三)算法效率 ...
Excel如何排序？掌握3种排序方法！
我是个刚开始学习Excel的新手,对很多Excel的知识都不太熟悉.今天使用Excel进行表格排序时我又遇到了一些问题.请问Excel如何排序呢?希望给我一些建议. 在Excel中,排序是一种常见且有 ...

排序(尝试对时间戳做排序)

排序(尝试对时间戳做排序)相关推荐

最新文章

热门文章