vue项目使用Vue-draggable组件实现表格拖拽

最新推荐文章于 2024-09-30 15:49:07 发布

会飞的虫儿飞

最新推荐文章于 2024-09-30 15:49:07 发布

阅读量2.9k

点赞数

分类专栏：记录文章标签： javascript vue.js

本文链接：https://blog.csdn.net/xxitcef/article/details/117414716

版权

本文介绍了如何在Vue项目中通过安装和使用Vue-draggable库来实现表格行的拖拽功能。首先，通过npm安装依赖包vuedraggable。接着，在需要的组件中引入并注册该库。然后，在模板中构建表格，注意tbody部分需使用draggable指令。在JavaScript部分，实现了包括全选/非全选在内的相关功能，从而完成了一个具备拖拽功能的表格组件。

摘要由CSDN通过智能技术生成

一. 下载依赖包：npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖，注册组件：

import draggable from 'vuedraggable'

export default {
   
  components: {
    draggable },
 }

三. 在template 中建立表格，分别写出thead 部分不变，此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。

<table class="dataTabble">
      <thead>
        <tr>
          <th width="50" class="my-th">
            <a-checkbox @change="onChangeAll" :checked="checkedAll" :indeterminate="indeterminate" :disabled="list.length===0"></a-checkbox>
          </th>
          <th v-for="(item,index) in theadList" :width="item.width" :key="index" class="my-th">{
   {
    item.title }}</th>
        </tr>
      </thead>
      <draggable v-if="list.length>0" v-model="list" element="tbody" handle=".hand" @update="datadrag