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>
实现效果
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
