vue element 表格拖拽

最新推荐文章于 2024-08-02 11:25:35 发布

天空的鱼儿

最新推荐文章于 2024-08-02 11:25:35 发布

阅读量678

点赞数 2

分类专栏： vue+element 文章标签： vue.js

本文链接：https://blog.csdn.net/hong598hong/article/details/105839792

版权

本文介绍了一个基于Vue+Element UI技术栈的项目中如何为表格添加拖拽功能。通过安装SortableJS库，将表格数据渲染方式更改为数据驱动，并自定义列内容，实现了拖拽排序。详细步骤包括引入SortableJS、使用模板自定义表格内容、编写拖拽JS逻辑以及加载已保存的表格数据。

摘要由CSDN通过智能技术生成

一、背景

项目是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: &