可拖拽表格列组件（可以禁止拖动列如序号）

使用组件时需要安装sortablejs

$ npm install sortablejs --save

组件

<template>
<el-table ref="dragTable" :data="tableData" class="drag-table" border stripe :row-key="uniqueKey" tooltip-effect="dark" height="100%" element-loading-text="拼命加载中" v-loading="loading" element-loading-spinner="el-icon-loading"><el-table-column v-if="select" type="selection" :reserve-selection="multiple"></el-table-column><el-table-column type="index" label="序号" width="50" align="center"></el-table-column><el-table-column v-for="(item, index) in col" v-if="item" :key="`col_${index}`" :prop="dropCol[index].prop" :min-width="item.width || null" :label="item.label" align="center" show-overflow-tooltip sortable class-name="allow-drag"></el-table-column>
</el-table>
</template><script>
import Sortable from 'sortablejs'
export default {name: 'DragTable',props: {tableData: {type: Array,default: () => {return []}},tableHeader: {type: Array,default: () => {return []}},select: {type: Boolean,default: false},multiple: {type: Boolean,default: false},uniqueKey: String, // 行唯一值如idloading: {type: Boolean,default: false}},data () {return {dropCol: []}},computed: {col: function () {let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)return fillArray.concat(this.tableHeader)}},methods: {columnDrop () {const wrapperTr = document.querySelector('.el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,draggable: '.allow-drag',onEnd: evt => {const oldItem = this.dropCol[evt.oldIndex]this.dropCol.splice(evt.oldIndex, 1)this.dropCol.splice(evt.newIndex, 0, oldItem)}})}},created () {let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)this.dropCol = fillArray.concat(this.tableHeader)},mounted () {this.columnDrop()}
}
</script><style lang="less" scoped>
/deep/ .drag-table {}
</style>

使用方式

 <drag-table :tableData="listTableData" :tableHeader="tableHeader" :loading='btnValid.search' uniqueKey='createTime'></drag-table>

说明：
需要拖动的列设置class-name="allow-drag"，在Sortable.create中使用了draggable: '.allow-drag'。draggable参数设置的是可拖动的列，不设置的列不能拖动，也不能作为可以拖动的列的落点。如果某一列可以换位置，但是不能拖动，可以使用参数filter: ".ignore-elements"，不能拖动的列需要设置class-name="ignore-elements。
这里使用了col和dropCol的原因是，拖动后原来的col数组里面的项并不会交换位置，但是视觉上表头交换了位置，所以需要一个可以交换位置的数组来弥补数据不能交换位置的情况。用同一个col经测试，交换时会有异常，比如表头没有拖动，但是数据实现了交换。

可拖拽表格列组件（可以禁止拖动列如序号）相关推荐

HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
dropzone拖拽上传组件使用全记录
原文链接: dropzone拖拽上传组件使用全记录公司有一个需求是把附件上传优化成可以通过拖拽本地文件来上传的效果,找了一圈都没有找到特别简单好用的组件,最后还是决定使用github上1.6万sta ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
js和layerjs配合实现的拖拽表格列
前几天想着实现表格列的拖拽写了个例子一直不完美经过修改感觉还算完美了拖拽过程不会复制文字并且还能实现layerjs本身自带的表格排序功能. 1.首先引入layer.css jquery ...
树形可拖拽排序配置组件
效果使用场景 vue2下自定义表格表头配置: 列排序,显示/隐藏等.确保表头以配置项的形式加载,这样表格才能对修改后的配置作响应思路 1.表格使用render函数加载(如有疑问可私信),通过类似如 ...
vue 3 + antV s2表格可拖拽表格
vue 3 中使用S表格达到可拖拽 Introduction | S2 安装: npm install @antv/s2 <div id="chartDiv" ref=&qu ...
antd-table结合react-resizable实现多级表头可拖拽表格
关键字:react-resizable.antd-table.拖拽.多级表头.可变列宽 react-resizablehttps://github.com/react-grid-layout/reac ...
vant组件实现上传图片裁剪_如何用 120 行代码，实现交互完整的拖拽上传组件？...
作者 | 前端劝退师责编 | 伍杏玲你将在该篇学到: 如何将现有组件改写为 React Hooks函数组件 useState.useEffect.useRef是如何替代原生命周期和Ref的. 一个 ...

可拖拽表格列组件（可以禁止拖动列如序号）

可拖拽表格列组件（可以禁止拖动列如序号）相关推荐

最新文章

热门文章