VUE + Element UI + Sortablejs插件实现table列表的拖拽功能

青旅半醒 2023-06-18 12:50 17阅读 0赞

### **背景：**   ###

>              实现页面 **用户自定义 table列表 拖拽排序**

## 步骤：  ##

一、  导入  **Sortablejs插件**

npm install sortablejs --save

二、在使用的页面中导入

import Sortable from 'sortablejs';

三、**HTML代码**：

<el-table :data="tableData"  row-key="id">
        <el-table-column 
            v-for="(item, index) in col"   
            :key="`col_${index}`"   
            :prop="col[index].prop"    
            :label="item.label"
            align="center"
        ></el-table-column>
    </el-table>

## **备注****：** ** ** ##

> 需要注意的是**element table务必指定row-key**，**row-key必须是唯一的，如ID**，不然会出现排序不对的情况。但是**不可用index**，因为拖拽后index会变，会有问题。

四、**JS代码**:

<script>
    import Sortable from "sortablejs"
    export default {
        data() {
            return {
                dateQuery: '',
                col:[
                    {label: '手机号',  prop: 'sjh' },
                    {label: '姓名',  prop: 'name' },
                    {label: '邮箱',  prop: 'youxiang' },
                    {label: '参会单位',  prop: 'address' },
                    {label: '职务',  prop: 'zhiwu' },
                    {label: '所参会仪',  prop: 'suocanhuiyi' },
                ],
                dropCol:[
                    {label: '手机号',  prop: 'sjh' },
                    {label: '姓名',  prop: 'name' },
                    {label: '邮箱',  prop: 'youxiang' },
                    {label: '参会单位',  prop: 'address' },
                    {label: '职务',  prop: 'zhiwu' },
                    {label: '所参会仪',  prop: 'suocanhuiyi' },
                ],
                tableData: [{
                        sjh:'13856958563',
                        name: '王小虎1',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    }, {
                        sjh:'13856958563',
                        name: '王小虎2',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    },{
                        sjh:'13856958563',
                        name: '王小虎3',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    },{
                        sjh:'13856958563',
                        name: '王小虎4',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    },{
                        sjh:'13856958563',
                        name: '王小虎5',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    },{
                        sjh:'13856958563',
                        name: '王小虎6',
                        youxiang:'13856958563@163.com',
                        address: '北京市海阔天空有限公司',
                        zhiwu:'部门经理',
                        suocanhuiyi:'杂志社交流活动',
                    },
                    
                ],
            }
        },
        methods: {
            rowDrop () {
                // 此时找到的元素是要拖拽元素的父容器
                const tbody = document.querySelector('.el-table__body-wrapper tbody');
                const _this = this;
                let data = [];
                Sortable.create(tbody, {
                    draggable: ".el-table__row",
                    onEnd ({ newIndex, oldIndex }) {
                        // 将 拖拽后的列表信息 存到 data变量中
                        data = _this.tableData;
                    }
                });
                // 将 data变量中的 信息 赋值给 tableData 重新渲染列表数据
                if(!data){
                    this.tableData = data;
                }
                
            },
            // 列拖拽
            columnDrop () {
                const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
                this.sortable = Sortable.create(wrapperTr, {
                    animation: 180,
                    delay: 0,
                    onEnd: evt => {
                        const oldItem = this.dropCol[evt.oldIndex];
                        this.dropCol.splice(evt.oldIndex, 1);
                        this.dropCol.splice(evt.newIndex, 0, oldItem);
                    }
                });
            }
        },
        mounted () {
            this.rowDrop();
            this.columnDrop();
        },
        created(){
        },
    }
    </script>

备注：

> 如果 **不需要 列拖拽**功能，可以按照传统样式定义table列表，col、dropCol属性 及 columnDrop()  函数 可以删掉

** 页面效果：**

> 拖拽前：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]
> 
> **行** 拖拽后：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191202155310655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191202155210758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 el-table行拖拽排序效果的实现（基于sortablejs）

前言 ElementUI中的`Table`组件对于展示数据来说，有着不可替代的作用。但是也有一点点小缺陷，比如行不支持拖拽效果。当然我们可以借助于第三方库来实现行拖

墨蓝/ 2024年04月01日 17:01/ 0 赞/ 90 阅读

相关 SortableJS/Sortable拖拽组件，使用详细（Sortablejs安装使用）

简介：作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个`github`上一个不错的拖拽`js库`，能满足我们在项目开发中的需要，支持`Vue`和`React`，下面

男娘i/ 2023年10月04日 21:35/ 0 赞/ 70 阅读

相关 VUE + Element UI + Sortablejs插件实现table列表的拖拽功能

背景： > 实现页面用户自定义 table列表拖拽排序步骤：一、导入 Sortablejs插件 npm

青旅半醒/ 2023年06月18日 12:50/ 0 赞/ 18 阅读

相关 vue实现element-ui表格table拖拽效果

首先需要安装依赖： npm install sortablejs --save-dev 其次导入 ![20191119155340747.png][] ![

深碍√TFBOYSˉ_/ 2023年06月14日 10:55/ 0 赞/ 30 阅读

相关 element ui table中使用拖拽排序组件sortablejs及注意事项

element ui table中使用拖拽排序组件sortablejs及注意事项 1.使用：先安装 `sortablejs`插件,然后在当前页面引入 n

àì夳堔傛蜴生んèń/ 2022年11月07日 14:32/ 0 赞/ 108 阅读

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

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

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

相关 vue+element UI的 table组件实现日历

有现成的日历插件但是不符合需求，所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分：此部分为计算的当月的日期且包含是否可选，是否节假日等等可

太过爱你忘了你带给我的痛/ 2022年10月23日 12:59/ 0 赞/ 872 阅读

相关 elementUI Table组件实现拖拽效果

背景使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000

矫情吗；*/ 2022年04月22日 06:50/ 0 赞/ 582 阅读

相关 element目录树的拖拽功能----->

如果你用到拖拽,那么我猜你用到了svg.那么你对d3一定有一定的了解了. 总之我猜你一定是有基础的人.同时也为自己记录下,目录树的巨型Bug :allow-drop="al

谁践踏了优雅/ 2021年11月11日 12:28/ 0 赞/ 319 阅读

相关 vue element ui table 过滤功能实现

Element UI代码 <template> <div> <el-table :data="tableData"

水深无声/ 2021年09月27日 15:38/ 0 赞/ 890 阅读