vue+element-ui实现表格的拖拽排序

╰+哭是因爲堅強的太久メ 2022-10-25 15:26 326阅读 0赞

import sortable from "sortable.js"; //引入的npm  
methods:\{  
    //议题排序  
    tableSort()\{  
        const tbody = document.querySelector('.el-table\_body-wrapper tbody');  
        console.log('tbody',tbody)  
        let ops = \{  
            onEnd:(evt)=\{  
                const arrsp = this.tableData.splice(evt.oldIndex,1)\[0\];  
                this.tableData.splice(evt.newIndex,0,arrsp);  
                console.log('this.tableData',this.tableData)  
                this.$forceUpdate();  
            \},  
        \}  
        sortable.create(tbody,ops);  
    \},  
\}  
watch:\{  
    tableData:\{  
        immediate:false,  
        handler()\{  
            const tbody = document.querySelector('.el-table\_body-wrapper tbody');  
            console.log(tbody);

\}  
        let ops = \{  
            onEnd:(evt)=\{  
                const arrsp = this.tableData.splice(evt.oldIndex,1)\[0\];  
                this.tableData.splice(evt.newIndex,0,arrsp);  
                console.log('this.tableData',this.tableData)  
                this.$forceUpdate();  
            \}  
        \}  
        sortable.create(tbody,ops);  
    \}  
\},  
mounted()\{  
    this.tableSort();  
\},

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关 react 实现表格列表拖拽排序

问题描述在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。效果图如下所示： ![在这里插入图片描述][65ccb1747e394086a73022

傷城~/ 2024年03月30日 11:52/ 0 赞/ 72 阅读

相关 Vue3 实现拖拽排序

Vue3 实现拖拽排序我们使用的拖拽事件有： draggable：设置为可拖拽状态，true dragstart：开始拖拽 dragover：在拖拽

àì夳堔傛蜴生んèń/ 2023年09月27日 20:48/ 0 赞/ 2 阅读

相关 js实现拖拽排序

先马一下 [https://www.jianshu.com/p/a923add40767][https_www.jianshu.com_p_a923add40767] 转载

淩亂°似流年/ 2023年08月17日 17:29/ 0 赞/ 142 阅读

相关 View UI （iview）表格拖拽排序教程

View UI，即原先的 iView，从 2019 年 10 月起正式更名为 View UI，并使用全新的 Logo 在项目开发中，有时需要对表格进行拖拽排序，View UI

电玩女神/ 2023年02月16日 15:30/ 0 赞/ 582 阅读

相关 elementUI中table表格列实现拖拽

1、首先，需要执行`npm install sortablejs --save-dev` 安装sortable.js 2、在页面内引入 <template> <d

末蓝、/ 2022年12月16日 09:03/ 0 赞/ 465 阅读

相关 vue 中表格拖拽排序

vue+iview 表格拖拽排序，代码如下 <Table border ref="selection"

妖狐艹你老母/ 2022年11月29日 13:12/ 0 赞/ 311 阅读

相关 vue+element-ui实现表格的拖拽排序

import sortable from "sortable.js"; //引入的npm methods:\{ //议题排序 tableSort()

╰+哭是因爲堅強的太久メ/ 2022年10月25日 15:26/ 0 赞/ 327 阅读

相关 element+Sortable实现表格拖拽

1.先安装sortablejs <template> <el-table :data="Data" align="left"> <el-t

比眉伴天荒/ 2021年12月15日 00:15/ 0 赞/ 332 阅读

相关 vue实现表格拖拽并且可编辑

1使用vuedragger 第一步安装 vuedragger npm install vuedraggable --save 或者 npm i -S vued

逃离我推掉我的手/ 2021年08月28日 01:28/ 1 赞/ 1268 阅读

相关 js 表格排序(编辑+拖拽+缩放)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

- 日理万妓/ 2021年06月24日 13:58/ 0 赞/ 469 阅读