一、数组的排序必要性

在进行数组渲染的时候，为了更加贴合用户的使用习惯，使交互更加合理、人性化，进行数组的排序显得尤为重要。

二、代码示例

HTML

<div v-for="(item,index) in undisposedMessages" :key="item.id" v-show="isSelectUndisposed">
      <div class="content">
            <div class="content_detail">
                <i class="undisposed"></i>
                <span>日期 {{item.START_TIME_DATE}}</span>
                <p>陛下:{{item.WORK_NAME}}奏章已经提交给您，请抓紧时间批阅。</p>
            </div>
           <div class="content_btn">
                <button @click="goDealUndisposed(index)">批阅</button>
           </div>
     </div>
</div>

JS

res.data.lists.sort(function (a, b) {
      return a.START_TIME_DATE < b.START_TIME_DATE ? 1 : -1;
})
this.undisposedMessages = res.data.lists;

三、效果图

列表排序效果图

四、问题思考

上面的代码仅仅是对应一种条件进行排序，但是我们可不可以使用多个条件同时排序；这里我提供一种方法，方便大家参考。

1.代码展示

      let temp = [];
            let temp1 = [];
            let temp2 = [];
            let temp3 = [];
            res.data.lists.forEach(item => {
              
              if (item.TASK_STATUS == '1') {
                temp1.push(item);
              }
              temp1.sort(function (a, b) {
                return a.START_TIME_DATE < b.START_TIME_DATE ? 1 : -1;
              })

          
              if (item.TASK_STATUS == '2') {
                temp2.push(item);
              }
              temp2.sort(function (a, b) {
                return a.START_TIME_DATE < b.START_TIME_DATE ? 1 : -1;
              })

              if (item.TASK_STATUS == '3') {
                temp3.push(item);
              }
              temp3.sort(function (a, b) {
                return a.START_TIME_DATE < b.START_TIME_DATE ? 1 : -1;
              })

            })

      temp = temp1.concat(temp2).concat(temp3);
      this.allMessages = temp;

2.思路分析

在进行多条件排序的之后，我们可以使用其中一个条件进行排序，比如本例中的时间；另外，我们使用状态进行排序的时候，我们可以遍历数组，以不同的状态值进行分开保存多个数组，而后按顺序进行组合即可。