vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
el-table 里邊的border屬性，設(shè)置之后表格即可直接拖拽，下文內(nèi)容是相關(guān)擴(kuò)展功能的實現(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”這個指令，但是我直接在當(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組件中了。至此，可拖拽功能實現(xiàn)
但是在這些實現(xiàn)完成之后，我發(fā)使用官方的配置的情況下表格是可以行列拖拽的，這點是不太符合需求的，我們只希望列寬可以拖拽，于是我將官方的配置進(jìn)行了修改，將里邊的“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)文章
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細(xì)解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue-admin-template?報Uncaught?(in?promise)?error問題及解決
這篇文章主要介紹了Vue-admin-template?報Uncaught?(in?promise)?error問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
解決vue.js this.$router.push無效的問題
今天小編就為大家分享一篇解決vue.js this.$router.push無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
通過vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題,文中單獨給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue列表自動滾動實例代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vant自定義二級菜單操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue下使用fullcalendar及簡單案例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01