vue + element table 实现行列拖拽

 

element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现

 

安装Sortable.js

npm install sortablejs --save

引入Sortable:

import Sortable from ‘sortablejs’

 

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

 

view:

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

 

data:

复制代码
col:[
                    {label: '日期',  prop: 'date' },  
                    { label: '姓名',  prop: 'name' }, 
                    {label: '地址', prop: 'address'}
                ],
                dropCol:[
                    {label: '日期',  prop: 'date' },  
                    {label: '姓名', prop: 'name' }, 
                    { label: '地址', prop: 'address'}
                ],
                tableData: [
                    {
                        id: '1',
                        date: '2016-05-02',
                        name: '王小虎1',
                        address: '上海市普陀区金沙江路 100 弄'
                    },
                    {
                        id: '2',
                        date: '2016-05-04',
                        name: '王小虎2',
                        address: '上海市普陀区金沙江路 200 弄'
                    },
                    {
                        id: '3',
                        date: '2016-05-01',
                        name: '王小虎3',
                        address: '上海市普陀区金沙江路 300 弄'
                    },
                    {
                        id: '4',
                        date: '2016-05-03',
                        name: '王小虎4',
                        address: '上海市普陀区金沙江路 400 弄'
                    }
                ]
复制代码

 

mounted:

this.rowDrop();
this.columnDrop();
        

 

method: 

复制代码
// 行拖拽
            rowDrop () {
               // 此时找到的元素是要拖拽元素的父容器
                const tbody = document.querySelector('.el-table__body-wrapper tbody');
                const _this = this;
                Sortable.create(tbody, {
           //  指定父元素下可被拖拽的子元素
                  draggable: ".el-table__row",
                   onEnd ({ newIndex, oldIndex }) {
                        const currRow = _this.tableData.splice(oldIndex, 1)[0];
                        _this.tableData.splice(newIndex, 0, currRow);
                    }
                });
            },
            // 列拖拽
            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);
                    }
                });
            },
复制代码

 

posted @   Lee_Yong  阅读(1084)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示