当前位置:首页 > 前端 > Vue.js

Vue.js实现的上移下移的排序功能

Vue.js 2019-09-25

Vue.js实现上移下移删除功能

概述

项目开发过程中,碰到需要上下移动的功能。开始觉得挺复杂,后面仔细一想挺简单,代码贴上来,实现方法应该有很多种。

Demo代码

  1. <template>
  2. <div v-for="(item, index) in data" :key="index" class="sub-list">
  3. <div>{{ item.name }}</div>
  4. <div class="op-box">
  5. <span @click="onUpItem(item, index)">上移</span>
  6. <span @click="onDownItem(item, index)">下移</span>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. data: [
  15. {name: '1'},
  16. {name: '2'},
  17. {name: '3'},
  18. {name: '4'}
  19. ]
  20. }
  21. },
  22. methods: {
  23. // 上移
  24. onUpItem (item, index) {
  25. this.data.splice(index - 1, 0, item)
  26. this.data.splice(index + 1, 1)
  27. },
  28. // 下移
  29. onDownItem (item, index) {
  30. this.data.splice(index + 2, 0, item)
  31. this.data.splice(index, 1)
  32. }
  33. }
  34. }
  35. </script>
下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部