前端写排序功能和遇到的坑

最新推荐文章于 2024-06-14 14:22:02 发布

Artsman

最新推荐文章于 2024-06-14 14:22:02 发布

阅读量1.7k

点赞数

分类专栏：前端开发技术文章标签： javascript vue.js 前端 html5

本文链接：https://blog.youkuaiyun.com/Liu_JiaqiPro/article/details/123678342

版权

本文介绍了前端实现排序功能的步骤，包括布局、点击事件、排序逻辑及代码实现。重点讲述了在使用sort()方法时遇到的问题，即直接操作数组导致页面提前更新。通过在sort()前加上slice()来解决这个问题，以及如何实现首字母排序。文章总结了一个简单的首字母排序方法，并提醒开发者注意避免直接操作渲染数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

先说思路：

第一步布局的时候要把上下小箭头分开写因为要涉及变色显示。

第二步写一个点击事件作为变色的基础和排序的规则。比如点name后面的箭头先把上面变色后把下面变色。

第三步实现排序功能。着重有两种排序，文字的首字母排序和数字的大小排序。

第四步敲代码

注*：点击事件传1就是name后面的箭头 234以此类推。sortFlag是着色的依据。

<td class="start">
              <div class="h">name</div>
              <div class="top hand" @click="sort(1)">
                <i
                  class="el-icon-caret-top"
                  :class="sortFlag == 1 ? 'org' : ''"
                ></i>
                <i
                  class="el-icon-caret-bottom caret"
                  :class