vue+vant 实现列表上下排序

vue+vant 实现列表上下排序

<template>
  <div class="hello">
    <van-cell v-for="(item,i) in list" :key="i">
      {{item.name}}
      <template #right-icon>
        <van-button round type="info" size="mini" @click="up(i,item)" v-show="i>0">上移</van-button>
        <van-button round type="info" size="mini" @click="down(i,item)" v-show="i<list.length-1">下移</van-button>
      </template>
    </van-cell>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell, CellGroup, Button } from 'vant'

Vue.use(Button, Cell, CellGroup)
export default {
  name: 'HelloWorld',
  data () {
    return {
      list: [
        {
          id: 1,
          name: 'a',
          sort: 1
        },
        {
          id: 2,
          name: 'b',
          sort: 2
        },
        {
          id: 3,
          name: 'c',
          sort: 3
        },
        {
          id: 4,
          name: 'd',
          sort: 4
        }
      ]
    }
  },
  methods: {
    arrSort () {
      this.list = this.list.sort((a, b) => a.sort - b.sort)
      //主要排序方法！
    },
    down (i, row) {
      row.sort += 1
      const nextRow = this.list[i + 1]
      nextRow.sort -= 1
      this.$set(this.list, i, row)
      this.$set(this.list, i + 1, nextRow)
      this.arrSort()
    },
    up (i, row) {
      row.sort -= 1
      const prveRow = this.list[i - 1]
      prveRow.sort += 1
      this.$set(this.list, i, row)
      this.$set(this.list, i - 1, prveRow)
      this.arrSort()
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

实现效果