To Be Simple，基于elementUI的功能擴展組件系列1之Table篇

superPershing 發布于2019-08-23 18:02 / 1707人閱讀

摘要：項目地址前言結合日常開發，封裝常用功能，提高開發效率。通用顯示效果支持類型類型文本鏈接文檔圖片用法相關屬性屬性參數說明類型可選值默認值動畫效果的列的配置對象，更多細節請參見列屬性。

項目地址：tbs-ve-template

前言

結合日常開發，封裝常用功能，提高開發效率。讓程序猿兄弟姐妹們也有時間約約女票，逗逗男票，做做自己想做的事情，不要天天在辦公室造輪子！

1.通用Table

思路

類似easy-ui的table加載方式

環境簡述

開發框架:基于vue-admin-template

github:https://github.com/PanJiaChen...

JS 包管理工具: Yarn

安裝方法：https://www.cnblogs.com/xiang...

項目啟動:
第一步：yarn install 下載所有依賴包
第二步：yarn run dev 下載所有依賴包
第三步：訪問http://localhost:9528

項目結構

說明：為了避免代碼過長不易瀏覽，講vue代碼與js代碼分開編輯。

1. 通用Table 顯示效果

支持類型

類型：文本 | 鏈接 | 文檔 | 圖片

用法

相關屬性
Table 屬性:

參數	說明	類型	可選值	默認值
listLoading	動畫效果	boolean	—	true
columns	table 的列（column）的配置對象，更多細節請參見列（column）屬性。	array	—	—
ui	table顯示效果的配置對象，更多細節請參見列（ui）屬性	array	—	—
data	顯示數據集合，一般從遠程獲取數據后進行賦值	array	—	—
page	table分頁配置對象，更多細節請參見列（page）屬性	array	—	—

Table列（Column）屬性:

參數	說明	類型	可選值	默認值
label	列的標題文本	string	—	—
field	列的字段名,與data屬性中的名稱對應	string	—	—
width	列的寬度	number	—	—
showtype	列的類型，normal：為文本類型	string	normal、http、file、image	normal
filter	過濾器，類似easyui中formatter屬性，用于格式數據	string	—	—

Table樣式（ui）屬性:

參數	說明	類型	可選值	默認值
tableHeight	Table高	string、number	—	—
tableWidth	Table寬度	string、number	—	—

Table分頁（page）屬性:

參數	說明	類型	可選值	默認值
total	總條目數	number	—	—
listQuery	分頁參數，listQuery：{ page：當前頁碼，limit:每頁條目數 }	number	—	—

有問題反饋

在使用中有任何問題，歡迎反饋給我，可以用以下聯系方式跟我交流

QQ: 375766253

郵件:375766253@qq.com

GPU云服務器云服務器之基礎篇云計算系列服務器篇系列之系列之二

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104552.html

數據驅動，快速開發組件（ElementUI篇）

摘要：基于這種思路，那留給我們的只有兩步，組件設計和數據設計。關于組件的相關邏輯，可能要在文章里面一次性說清楚，還是需要費很大的精力，不過希望數據驅動的思想能夠讓之前沒有體會到這種開發樂趣的小伙伴們有到新的想法。在日常開發中，我們肯定不止一次碰到重復的業務代碼，明明功能相似，但總沒思路去把它封裝成組件。關于封裝組件，希望這篇文章能帶給大家新的思路，去更高效的完成日常開發。（注：例子都是基于...

enrecul101 2019-08-26 13:39 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0