上移
当前位置:   article > 正文

elment ui table 点击上下移动表格_el-table怎么实现行上移和下移

el-table怎么实现行上移和下移
  1. 点击按钮传入,下标
  2. <el-button
  3. size="mini"
  4. type="text"
  5. icon="el-icon-top"
  6. @click="move(scope.$index,scope.row)"
  7. v-hasPermi="['sourceData:detectManage:remove']"
  8. >上移</el-button
  9. >
  10. <el-button
  11. size="mini"
  12. type="text"
  13. icon="el-icon-bottom"
  14. @click="upDown(scope.$index,row)"
  15. v-hasPermi="['sourceData:detectManage:remove']"
  16. >下移</el-button
  17. >
  18. js 通过数组splice 方法进行删除替换从而实现点击上下移动
  19. // 上移
  20. move(index,row){
  21. if (index <= 0) {
  22. this.$message.error('不能继续向上移动')
  23. } else {
  24. const upData = this.listData[index - 1]
  25. this.listData.splice(index - 1, 1)
  26. this.listData.splice(index, 0, upData)
  27. }
  28. },
  29. // 下移动
  30. upDown(index, scope) {
  31. if (index === (this.listData.length - 1)) {
  32. this.$message.error('不能继续向下移动')
  33. } else {
  34. const downData = this.listData[index + 1]
  35. this.listData.splice(index + 1, 1)
  36. this.listData.splice(index, 0, downData)
  37. }
  38. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/114591
推荐阅读
相关标签
  

闽ICP备14008679号