🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# :-: 给表增加排序功能 > 1. 在vxe-table列中添加拖拽按钮 ![](https://img.kancloud.cn/f2/1b/f21ba8dbfc0ff2af1c5637ee3a15f5c0_940x158.png) > 2. 引用相应的文件 ![](https://img.kancloud.cn/58/bf/58bf39e5eb3deca3017c67774ff91a64_784x51.png) > 3. 调用 ![](https://img.kancloud.cn/a5/e3/a5e33136e18d83cd9a8d579041649395_472x152.png) > 4. 在data中新增排序规则,以排序号升序排列 ![](https://img.kancloud.cn/49/aa/49aa2ed433a2f071e62dcab4d674433b_545x230.png) > 5. 在created方法中书写实现方法 ![](https://img.kancloud.cn/a9/b3/a9b35ae9354196250359eec4c627406c_652x66.png) > 6. 在methods中实现方法 ![](https://img.kancloud.cn/ff/39/ff3977901616945feabee27d16681887_925x884.png) > 7. 在methods中书写重新计算sort的方法 ![](https://img.kancloud.cn/9d/f1/9df135dee261ff320efd21baa7920cf3_736x156.png) > 8. 在methods中书写保存排序的方法 ![](https://img.kancloud.cn/88/6f/886f41fe2eb1b55e57e81d2bd70ebe50_700x232.png) > 9. 在data中的url中书写后台保存排序方法的路径 ![](https://img.kancloud.cn/3c/ec/3ceccfa3e9a149b13a34a25bdb427bf9_688x177.png) > 10. 在后台书写保存排序的方法 ![](https://img.kancloud.cn/82/59/82595872490e38df033a9682bc7b938a_1039x735.png) ***** > ## 如果是树结构的列表的话,实现方法和重新计算排序号的方法不同 > 1. 在methods中实现方法 ![](https://img.kancloud.cn/ff/af/ffaf5ccb7d814e3cef8e377737acd524_1147x1505.png) > 2. 在methods中书写重新计算排序号的方法 ![](https://img.kancloud.cn/2d/f5/2df560ef82983756c73ca7d38b0f0107_576x325.png)