快捷導(dǎo)航

vue3?elementPlus?table實(shí)現(xiàn)列寬可拖拽功能

更新時(shí)間：2024年05月06日 10:50:18 作者：小雞愛吃米

這篇文章主要介紹了vue3?elementPlus?table實(shí)現(xiàn)列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

el-table 里邊的border屬性，設(shè)置之后表格即可直接拖拽，下文內(nèi)容是相關(guān)擴(kuò)展功能的實(shí)現(xiàn)

最近公司項(xiàng)目里邊需求要讓表格的寬度可拖動(dòng)，我們的公司的項(xiàng)目有vue2的也有vue3的，表格分別使用了element UI和element Plus，前者的社區(qū)比較豐富，我們使用了mizuka-wu/el-table-draggable

但是對于后者，我查到社區(qū)相關(guān)的插件并不多，但也找到了guolaopi/element-plus-table-dragable-demo

把demo下載下來之后，我發(fā)現(xiàn)其中引用了這個(gè)包，并在App.vue文件里邊找到了所使用的demo

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

不過，問題是我在引入的時(shí)候卻發(fā)現(xiàn)是有問題的，首先我們的table是封裝到公共組件里邊了，引入完成之后，會(huì)報(bào)兩個(gè)錯(cuò)誤，一個(gè)是引入報(bào)錯(cuò)，這個(gè)我直接添加了注釋@ts-ignore把問題解決了

在這里插入圖片描述

第二個(gè)問題就是引入之后控制臺(tái)直接報(bào)directive的問題，也就是指令的問題，因?yàn)閠able里邊使用了“v-dragable”這個(gè)指令，但是我直接在當(dāng)前頁面引入之后，這個(gè)指令并沒有被注冊，沒辦法，只能手動(dòng)添加指令了

首先在自定義指令文件中添加這樣的文件

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頁面進(jìn)行引入

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()

其他的部分了話，就可以直接寫在相應(yīng)的table組件中了。至此，可拖拽功能實(shí)現(xiàn)

但是在這些實(shí)現(xiàn)完成之后，我發(fā)使用官方的配置的情況下表格是可以行列拖拽的，這點(diǎn)是不太符合需求的，我們只希望列寬可以拖拽，于是我將官方的配置進(jìn)行了修改，將里邊的“thead”、“tbody”替換成了“colgroup”

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

至此，需求實(shí)現(xiàn)

到此這篇關(guān)于vue3 elementPlus table實(shí)現(xiàn)列寬可拖拽功能的文章就介紹到這了,更多相關(guān)vue3 elementPlus table拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: