vue+elementui-table行拖拽及限制只能拖拽每行的第一个单元格

弋耳

已于 2023-03-24 15:51:46 修改

阅读量1.3k

点赞数

文章标签： elementui vue.js javascript 前端 Powered by 金山文档

于 2023-03-22 14:01:47 首次发布

本文链接：https://blog.csdn.net/qq_48965193/article/details/129706457

版权

最近要实现elementui表格的行拖拽功能，参考了很多文章和拖拽组件的官网，得出以下心得经验。

实现思路

主要是借助sortablejs。

首先，安装sortablejs组件

npm install sortablejs --save

其次，将组件引入所需页面

import Sortable from 'sortablejs';

实现拖拽的主要要点（这点必须有）

使用class为 draggable 的div 包裹整个表格，以便拖拽代码中，准确抓取到拖拽元素的父容器。

<div class="draggable" style="padding: 20px">
    <el-table row-key="Id" :data="tableData" style="width: 100%" border>
        <el-table-column></el-table-column>
    </el-table>
</div>

实现行拖拽的要点

需在 el-table 标签中，根据行的内容指定行的唯一标识 row-key="Id"。

限制只能拖拽每行的第一个单元格的要点

根据官网的示例，我的想法是给el-table的第一列加入i标签，标签的类名为handle，handle前面可以为该列设置一个elementui icon 图标以便于拖拽，如下所示

<el-table-column type="index" label="#" width="60" align="center"><i class="el-icon-s-promotion handle"></i></el-table-column>

拖拽范例代码

行拖拽没有限制

//行拖拽
rowDrop() {
    debugger
    const me = this;
    //①这里取的是全局的tbody,如果项目中这个组件有复用的话就不要用，如果没有复用就可以
    const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
    //②如果组件有复用可以用如下代码，去找到这个文件当前的tobody
    let tbody;
    e: for (let nodes of me.$refs.serveTable.$refs.bodyWrapper.children) {
        if (nodes.tagName.toUpperCase() == "TABLE") {
            for (let nodeChilds of nodes.children) {
                if (nodeChilds.tagName.toUpperCase() == "TBODY") {
                    tbody = nodeChilds;
                    break e;
                }
            }
        }
    }
    //上述两者二选一
    this.tableObject = Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        draggable: ".draggable .el-table__row", 
        onEnd({ newIndex, oldIndex }) {
            const currRow = me.tableData.splice(oldIndex, 1)[0];
            me.tableData.splice(newIndex, 0, currRow);
        },
    });
},

然后在调接口的时候或者开启拖拽的时候去调用这个方法就可以了。

限制只能拖拽每行的第一个单元格

//行拖拽
rowDrop() {
    debugger
    const me = this;
    //①这里取的是全局的tbody,如果项目中这个组件有复用的话就不要用，如果没有复用就可以
    const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
    //②如果组件有复用可以用如下代码，去找到这个文件当前的tobody
    let tbody;
    e: for (let nodes of me.$refs.serveTable.$refs.bodyWrapper.children) {
        if (nodes.tagName.toUpperCase() == "TABLE") {
            for (let nodeChilds of nodes.children) {
                if (nodeChilds.tagName.toUpperCase() == "TBODY") {
                    tbody = nodeChilds;
                    break e;
                }
            }
        }
    }
    //上述两者二选一
    this.tableObject = Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        handle: ".handle", 
        onEnd({ newIndex, oldIndex }) {
            const currRow = me.tableData.splice(oldIndex, 1)[0];
            me.tableData.splice(newIndex, 0, currRow);
        },
    });
},

然后在调接口的时候或者开启拖拽的时候去调用这个方法就可以了。

综上所述，就是我的一点经验体会，欢迎随时提问。