经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
拖拽表格——Sortable
来源:cnblogs  作者:bugSource  时间:2021/4/6 9:33:48  对本文有异议

官网:http://www.sortablejs.com/index.html

Sortable.js是一款轻量级的拖放排序列表的js插件。支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

npm下载

  1. npm install sortablejs --save

vue引用

  1. import Sortable from 'sortablejs'

GitHub项目Demo地址:https://github.com/Beingyo/vue-test-template/tree/main/src/page/sortable

示例:

重点:el-table的row-key必填,否则数据渲染会出错

demo代码:

  1. <template>
  2. <div>
  3. <el-table
  4. :data="list"
  5. :row-class-name="tableRowClassName"
  6. row-key="id"
  7. style="width: 1000px;margin: 0 auto">
  8. <el-table-column
  9. type="index"
  10. label="下标"
  11. align="center"
  12. width="300">
  13. </el-table-column>
  14. <el-table-column
  15. v-for="(label,index) in labels"
  16. :key="index"
  17. :label="label.label"
  18. :prop="label.prop"
  19. align="center">
  20. </el-table-column>
  21. </el-table>
  22. </div>
  23. </template>
  1. <script>
  2. import Sortable from 'sortablejs'
  3. export default {
  4. name: 'sortable',
  5. data() {
  6. return {
  7. // list: [],
  8. list: [
  9. {index: '', id: 1, classifyName: '111111111111'},
  10. {index: '', id: 2, classifyName: '222222222222'},
  11. {index: '', id: 3, classifyName: '333333333333'},
  12. {index: '', id: 4, classifyName: '444444444444'},
  13. {index: '', id: 5, classifyName: '555555555555'},
  14. {index: '', id: 6, classifyName: '666666666666'},
  15. {index: '', id: 7, classifyName: '777777777777'},
  16. {index: '', id: 8, classifyName: '888888888888'}
  17. ],
  18. indexList: [],
  19. labels: [
  20. {label: 'ID', prop: 'id'},
  21. {label: '分类名', prop: 'classifyName'}
  22. ]
  23. }
  24. },
  25. mounted() {
  26. const tbody = document.querySelector('.el-table__body-wrapper tbody')
  27. const _this = this
  28. Sortable.create(tbody, {
  29. onEnd({newIndex, oldIndex}) {
  30. var $li = tbody.children[newIndex]
  31. var $oldLi = tbody.children[oldIndex]
  32. // 先删除移动的节点
  33. tbody.removeChild($li)
  34. // 再插入移动的节点到原有节点,还原了移动的操作
  35. if (newIndex > oldIndex) {
  36. tbody.insertBefore($li, $oldLi)
  37. } else {
  38. tbody.insertBefore($li, $oldLi.nextSibling)
  39. }
  40. // 更新items数组
  41. const currRow = _this.list.splice(oldIndex, 1)
  42. _this.list.splice(newIndex, 0, currRow[0])
  43. // 下一个tick就会走patch更新
  44. for (var i = 0; i < _this.list.length; i++) {
  45. _this.list[i].index = _this.indexList[i]
  46. }
  47. console.log('传输数据:')
  48. console.log(JSON.stringify(_this.list))
  49. },
  50. animation: 150
  51. })
  52. },
  53. methods: {
  54. tableRowClassName({rowIndex}) {
  55. // 把每一行的索引放进row
  56. this.indexList[rowIndex] = rowIndex
  57. }
  58. }
  59. }
  60. </script>

原文链接:http://www.cnblogs.com/bugSource/p/14582811.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号