一、背景
项目是vue+element ui技术栈开发的,需求是要给表格做个拖拽功能,而element ui又不支持
二、下载依赖
npm安装 $ npm install sortablejs --save
三、实现
第一步:引入sortablejs
import Sortable from ‘sortablejs’
第二步:将table的渲染方式更改为数据渲染
// dataHeader 原数据
// 数据可以根据自己项目实际需要定义
// 简单说下我的这组数据
// width minWidth 宽度以及最小宽度(缓存宽度功能需要)
// label 列头文字 prop 当前列字段
// sortable 是否支持排序 columnKey 排序字段 alignType 对齐方式
export default {
data(){
return {
dataHeader: [
{
type: 'text',
width: '80',
minWidth: '40',
label: '操作',
prop: 'operateColumn',
sortable: false,
columnKey: '',
alignType: 'left',
showOverflow: true
}]
// dropDataHeader 记录拖拽后的数据,存储到缓存中
dropDataHeader:[ {
type: 'text',
width: &