vue3 elmentPlus table实现列宽可拖拽功能

2024-11-26 14:15:45

el-table 里边的border属性，设置之后表格即可直接拖拽，下文内容是相关扩展功能的实现

最近公司项目里边需求要让表格的宽度可拖动，我们的公司的项目有vue2的也有vue3的，表格分别使用了element UI和element Plus，前者的社区比较丰富，我们使用了mizuka-wu/el-table-draggable

但是对于后者，我查到社区相关的插件并不多，但也找到了guolaopi/element-plus-table-dragable-demo

把demo下载下来之后，我发现其中引用了这个包，并在App.vue文件里边找到了所使用的demo

"element-plus-table-dragable": "^1.0.0"

不过，问题是我在引入的时候却发现是有问题的，首先我们的table是封装到公共组件里边了，引入完成之后，会报两个错误，一个是引入报错，这个我直接添加了注释@ts-ignore把问题解决了

第二个问题就是引入之后控制台直接报directive的问题，也就是指令的问题，因为table里边使用了“v-dragable”这个指令，但是我直接在当前页面引入之后，这个指令并没有被注册，没办法，只能手动添加指令了

首先在自定义指令文件中添加这样的文件

import type { Directive, App } from 'vue';
// @ts-ignore
import { vDragable } from "element-plus-table-dragable";
const dragableDirective: Directive = {
  mounted(el, binding) {
  },
  updated(el, binding) {
  },
  unmounted(el) {
  },
};
export function setupDragableDirective(app: App) {
  app.directive('dragable', vDragable);
}
export default vDragable;

在index页面进行引入

import type { App } from 'vue';
import { setupDragableDirective } from './dragable';

export function setupGlobDirectives(app: App) {
  setupDragableDirective(app)
}

在main.js中初始化

import App from "./App.vue";
import { createApp } from "vue";
import { setupGlobDirectives } from '@/directives';

function init(){
  const app = createApp(App);
  setupGlobDirectives(app);
  app.mount("#app");
}

init()

其他的部分了话，就可以直接写在相应的table组件中了。至此，可拖拽功能实现

但是在这些实现完成之后，我发使用官方的配置的情况下表格是可以行列拖拽的，这点是不太符合需求的，我们只希望列宽可以拖拽，于是我将官方的配置进行了修改，将里边的“thead”、“tbody”替换成了“colgroup”

const dragOptions = [{
	selector: "colgroup",
	option: {}
}]

至此，需求实现

到此这篇关于vue3 elmentPlus table实现列宽可拖拽的文章就介绍到这了,更多相关vue3 elmentPlus table拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue3 elmentPlus table实现列宽可拖拽功能

el-table 里边的border属性,设置之后表格即可直接拖拽,下文内容是相关扩展功能的实现最近公司项目里边需求要让表格的宽度可拖动,我们的公司的项目有vue2的也有vue3的,表格分别使用了element UI和element Plus,前者的社区比较丰富,我们使用了mizuka-wu/el-table-draggable 但是对于后者,我查到社区相关的插件并不多,但也找到了guolaopi/element-plus-table-dragable-demo 把demo下载下来之后,我发现
jQuery表格列宽可拖拽改变且兼容firfox

本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
vue3使用自定义指令实现el dialog拖拽功能示例详解

目录实现el-dialog的拖拽功能通过自定义指令实现拖拽功能实现拖拽功能使用方式实现el-dialog的拖拽功能这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原
vue3使用vuedraggable实现拖拽功能

本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 1.npm i vuedraggable -S,使用这个命令,vue3会报错,如下图 2.使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版 3.vue使用代码如下: <template> <div> <h1 class="title">拖拽<
ant design中实现table的表格行的拖拽

前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的完全没有思路, 然后就打开官网的文档进行观看.一开始准备写打开官网的一个文档是4.0的看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr
jQuery实现的简单拖拽功能示例

本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba
js实现简单div拖拽功能实例

本文实例讲述了js实现简单div拖拽功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="
微信小程序实现拖拽功能

<view class='collectBox' bindtap='addCollect' wx:if="{{write[0]+write[1] > 0}}" bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;"> <image src='../../images/icon/addcollect.p
RecyclerView实现侧滑拖拽功能

本文实例为大家分享了RecyclerView实现侧滑拖拽功能的具体代码,供大家参考,具体内容如下准备 ItemDragListener package slideslipdrag; import android.support.v7.widget.RecyclerView; /** * Created on 2018/7/22. * * @desc ItemDragListener */ public interface ItemDragListener { /** * 拖拽 * * @par
Vue使用vue-draggable 插件在不同列表之间拖拽功能

今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图). 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用安装vue-draggable: npm install vuedraggable 在使用插件的组件内引入vue

vue3 elmentPlus table实现列宽可拖拽功能

相关推荐

随机推荐