基于Element-Ui封裝公共表格組件的詳細圖文步驟
更新時間：2022年09月27日 11:27:58 作者：灰海
在平時開發(fā)的時候很多情況都會使用到表格和分頁功能,下面這篇文章主要給大家介紹了關(guān)于如何基于Element-Ui封裝公共表格組件的詳細圖文步驟,需要的朋友可以參考下
項目組最近需要把老項目拆出來表格都是獨立的需要重新封裝公共的表格組件
以下是實現(xiàn)邏輯以及部分截圖
實現(xiàn)邏輯是類似于antd-vue框架的寫法，將columns拆出來 在columns中填寫相關(guān)的表頭名字以及需要的邏輯 如 插槽 移入提示，字段值轉(zhuǎn)換…等等
因公司審查嚴格 部分截圖奉上（需要代碼可進行圖片文字轉(zhuǎn)化）
公用的table，值為通過父組件傳遞過來
table-column進行遍歷通過父組件傳值進行渲染
如有多級table時，通過children進行遍歷渲染
需要使用插槽進行處理樣式等時，通過slot進行處理
分頁處理同上 使用傳過來的值監(jiān)聽處理
父組件（使用表格組件）截圖
columns:數(shù)組傳值進行遍歷
需要點擊的按鈕通過operate傳遞
公共部分截圖（處理了一下按鈕的展示方式 大于三個展示為更多 鼠標移入顯示 依據(jù)具體需求個性化處理）
總結(jié)
到此這篇關(guān)于基于Element-Ui封裝公共表格組件的文章就介紹到這了,更多相關(guān)Element-Ui封裝公共表格組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
Vue 3 自定義權(quán)限指令 v-action的作用
在實際的前端開發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權(quán)限動態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識,需要的朋友可以參考下2025-04-04
前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網(wǎng)斷了,都會導(dǎo)致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實現(xiàn)大文件切片上傳吧2023-11-11
vue router學(xué)習(xí)之動態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動態(tài)路由和嵌套路由，詳細的介紹了動態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下2017-09-09
uniapp定義new plus.nativeObj.View實現(xiàn)APP端全局彈窗功能
文章介紹了在UniApp中使用`newplus.nativeObj.View`實現(xiàn)彈窗的原因和方法,它定義了一個`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue CLI 2.x搭建vue(目錄最全分析),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue-cli是什么及創(chuàng)建vue-cli項目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具，支持創(chuàng)建vue2和vue3的項目，本文給大家詳細講解vue-cli是什么及創(chuàng)建vue-cli項目的方法，感興趣的朋友跟隨小編一起看看吧2023-04-04
vue中報錯“error‘xxx‘?is?defined?but?never?used”問題及解決
介紹了兩種解決代碼導(dǎo)入問題的方法：單一代碼解決和全局解決,第一種方法是在代碼前面添加特定代碼并保存；第二種方法是在package.json中添加代碼后重啟項目,這些方法可以有效解決導(dǎo)包錯誤提示,希望對大家有幫助2024-10-10
這篇文章主要為大家詳細介紹了Vue組件tree實現(xiàn)樹形菜單，小巧實用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04