element 的 table使用Sortable.js进行拖拽的时候,禁止某些列的拖拽功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element 的 table使用Sortable.js进行拖拽的时候,禁止某些列的拖拽功能相关的知识,希望对你有一定的参考价值。

参考技术A 因为element中的table不具备拖拽排序的功能,所以有时候会用到Sortable.js去实现拖拽的功能。具体的使用方法可以参考以下 https://blog.csdn.net/weixin_34301307/article/details/87527853

但是有时候我们只想特定的列能够进行拖拽,特别是在有input输入框的时候,如果包含input的列也能进行拖拽的话,会存在鼠标不能拖动选中input输入框里面内容的问题,因为但在input上拖动时,已经启动了拖拽功能,所有会导致无法选中input里面的内容,最直接效果就是,但你想复制粘贴input里面内容的时候,你会发现压根选不到里面的内容,而是被拖着走。

给需要拖动的列加一个共同的class,比如

然后运用handle属性就可以啦,handle就是用来控制允许拖动的元素的

element+sortablejs插件实现拖拽排序效果

背景
1、后台管理系统中表格需要实现行拖拽功能
2、表格使用element组件库中el-table

方案介绍

1、Sortable.js
介绍:Sortable.js是一款轻量级的拖放排序列表的js插件
引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
参考地址: https://github.com/SortableJS/Sortable

2、vuedraggable
介绍:基于Sortable.js的vue组件,用以实现拖拽功能
引用自官方文档:Vue drag-and-drop component based on Sortable.js
参考地址: https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中,发现必须用包裹拖动项的父级元素,但是element组件库对table进行封装,无法直接包裹拖动项(即tr)的父级元素

如果你的项目中,表格未使用组件库,实现可以参考 https://www.jb51.net/article/162648.htm

解决方案
使用 sortable.js
步骤一: 安装

npm install sortablejs --save

步骤二:引入(在main中全局引入或者需要的组件页面引入)

import Sortable from ‘sortablejs‘ //按需引入

步骤三: el-table 添加row-key属性

<el-table :data="data" border class="table" row-key="id" ref="dragTable" highlight-current-row>
    <el-table-column prop="id" label="序号" align="center">
    </el-table-column>
    <el-table-column prop="title" label="标题" align="center">
    </el-table-column>
</el-table>

步骤四 : 将拖拽元素设置为要拖动项的父级元素

mounted() {
    // 表格中需要实现行拖动,所以选中tr的父级元素
    const table = document.querySelector(‘.el-table__body-wrapper tbody‘)
    const self = this
    Sortable.create(table, {
        onEnd({ newIndex, oldIndex }) {
            console.log(newIndex, oldIndex)
            const targetRow = self.resourceList.splice(oldIndex, 1)[0]
            self.resourceList.splice(newIndex, 0, targetRow)
        }
    })
}

plan b:

mounted(){
    this.setSort();//拖拽
},
methods: {
    setSort(){
        // 表格中需要实现行拖动,所以选中tr的父级元素
        const el = this.$refs.dragTable.$el.querySelectorAll(‘.el-table__body-wrapper > table > tbody‘)[0] // table
        this.sortable = Sortable.create(el,{
            ghostClass:‘sortable-ghost‘,
            setData:function(dataTransfer){
                dataTransfer.setData(‘Text‘, ‘‘)
            },
            onEnd: evt => {
                // console.log(this.data) //:data="data" 所有数据
                const targetRow = this.data.splice(evt.oldIndex, 1)[0]; // this.data是表格所有数据
                // console.log(targetRow) // 挪动是单个数据
                this.data.splice(evt.newIndex, 0, targetRow);
            }
        })
    },
}

借鉴文章:https://www.zhangshengrong.com/p/2EaE06yO1M/

 

以上是关于element 的 table使用Sortable.js进行拖拽的时候,禁止某些列的拖拽功能的主要内容,如果未能解决你的问题,请参考以下文章

element-ui el-table表格排序sortable参数解析

Element UI table 顺序拖动

element 的 table使用Sortable.js进行拖拽的时候,禁止某些列的拖拽功能

element-ui table sortable某列数据后加上单位后排序不正确

element-ui table 表格组件实现可拖拽效果(行列)

element+sortablejs插件实现拖拽排序效果