惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
GRAHAM CLULEY
Cloudbric
Cloudbric
L
LINUX DO - 最新话题
W
WeLiveSecurity
人人都是产品经理
人人都是产品经理
S
Security Affairs
Google Online Security Blog
Google Online Security Blog
Attack and Defense Labs
Attack and Defense Labs
Google DeepMind News
Google DeepMind News
宝玉的分享
宝玉的分享
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
TaoSecurity Blog
TaoSecurity Blog
罗磊的独立博客
博客园 - Franky
有赞技术团队
有赞技术团队
V2EX - 技术
V2EX - 技术
博客园 - 聂微东
Hacker News - Newest:
Hacker News - Newest: "LLM"
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
阮一峰的网络日志
阮一峰的网络日志
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
美团技术团队
WordPress大学
WordPress大学
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Jina AI
Jina AI
The Cloudflare Blog
S
Secure Thoughts
酷 壳 – CoolShell
酷 壳 – CoolShell
Last Week in AI
Last Week in AI
小众软件
小众软件
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
雷峰网
雷峰网
S
Security @ Cisco Blogs
T
Troy Hunt's Blog
O
OpenAI News
博客园 - 司徒正美
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threat Research - Cisco Blogs
I
Intezer
T
Threatpost
Apple Machine Learning Research
Apple Machine Learning Research
H
Hacker News: Front Page
T
Tailwind CSS Blog
V
V2EX
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Security Archives - TechRepublic
Security Archives - TechRepublic
腾讯CDC
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News

博客园 - 此夏_唯美

新概念英语3单词表 git回滚代码 git常用命令大全 element动态表单验证一 vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio vue+wangEditor编辑器,上传图片请求后台接口 vue3+vant4+vuex4入门案例 vue3+vant3封装省市区组件 前端工具vscode将英文设置中文简单方便 vue3打包后一片空白控制台报错 vue实现自定义字体库 element-ui跨行 Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单 Vue+Element+Table表格动态跨列文章 vue框架文字滚动插件 vue项目浏览器ioc小图标 vue搭建项目iview+axios+less vue移动端在线签名 Vue中的input输入框无法输入强制渲染
vue表格拖拽使用Sortable插件库
此夏_唯美 · 2020-12-11 · via 博客园 - 此夏_唯美
 1 <template >
 2     <el-table
 3         row-key="name"
 4         :data="tableData"
 5         stripe style="width:100%;">
 6         <el-table-column prop="name" label="测试"></el-table-column>
 7     </el-table>
 8 </template>
 9 
10 <script>
11 import Sortable from 'sortablejs'
12 
13 export default {
14     data() {
15         return {
16             tableData: [
17                 {
18                     name: '凯小默111'
19                 },
20                 {
21                     name: '凯小默222'
22                 },
23                 {
24                     name: '凯小默333'
25                 },
26                 {
27                     name: '凯小默444'
28                 },
29                 {
30                     name: '凯小默555'
31                 }
32             ]
33         }
34     },
35     mounted() {
36         //使每次都可以拖拽
37         this.$nextTick(()=>{
38             setTimeout(()=>{
39                 this.rowDrop();
40             },100)
41         })
42     },
43     methods: {
44         //行拖拽
45         rowDrop() {
46             const tbody = document.querySelector('.el-table__body-wrapper tbody')
47             Sortable.create(tbody, {
48                 onEnd:({ newIndex, oldIndex })=> {
49                     const currRow = this.tableData.splice(oldIndex, 1)[0];
50                     this.tableData.splice(newIndex, 0, currRow);
51                     console.log(this.tableData);
52                 }
53             })
54         },
55     }
56 }
57 </script>

如果碰到了火狐浏览器拖动会在新窗口打开并去百度进行搜索等问题,如下解决方式:

  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }

<template >

    <el-table

        :data="tableData"

        

stripe style="width:100%;">

        <el-table-column prop="name" label="测试"></el-table-column>

    </el-table>

</template>

<script>

import Sortable from 'sortablejs'

export default {

                {

                },

                {

                },

                {

                },

                {

                },

                {

                }

            ]

        }

    },

            },100)

        })

    },

            

const tbody = document.querySelector('.el-table__body-wrapper tbody')

                

onEnd:({ newIndexoldIndex })=> {

                    

const currRow = this.tableData.splice(oldIndex1)[0];

                    

this.tableData.splice(newIndex0currRow);

                    

console.log(this.tableData);

                }

            })

        },

    }

}

</script>