vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
el-table 里邊的border屬性，設(shè)置之后表格即可直接拖拽，下文內(nèi)容是相關(guān)擴展功能的實現(xiàn)
最近公司項目里邊需求要讓表格的寬度可拖動，我們的公司的項目有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)其中引用了這個包，并在App.vue文件里邊找到了所使用的demo
"element-plus-table-dragable": "^1.0.0"
不過，問題是我在引入的時候卻發(fā)現(xiàn)是有問題的，首先我們的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組件中了。至此，可拖拽功能實現(xiàn)
但是在這些實現(xiàn)完成之后，我發(fā)使用官方的配置的情況下表格是可以行列拖拽的，這點是不太符合需求的，我們只希望列寬可以拖拽，于是我將官方的配置進行了修改，將里邊的“thead”、“tbody”替換成了“colgroup”
const dragOptions = [{
selector: "colgroup",
option: {}
}]
至此，需求實現(xiàn)
到此這篇關(guān)于vue3 elementPlus table實現(xiàn)列寬可拖拽功能的文章就介紹到這了,更多相關(guān)vue3 elementPlus table拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
平時在獲取真實DOM的時候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來帶著這兩個問題來解析一下nextTick的原理2023-05-05
vue使用vue-video-player無法播放本地視頻的問題及解決
這篇文章主要介紹了vue使用vue-video-player無法播放本地視頻的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了windows下vue-cli導入bootstrap樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
Vue路由的模塊自動化與統(tǒng)一加載實現(xiàn)
這篇文章主要介紹了Vue路由的模塊自動化與統(tǒng)一加載實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
利用vuex-persistedstate將vuex本地存儲實現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
今天小編就為大家分享一篇關(guān)于Vue中Axios從遠程/后臺讀取數(shù)據(jù)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01