vue的table組件

eternalshallow 發布于2019-08-23 11:26 / 2578人閱讀

一個vue-table的組件 說明：

1.基于element-ui開發的vue表格組件。

功能:

1.支持樹形數據的展示

2.行拖拽排序

3.單元格拖拽排序

github

使用方法：

1.下載npm包:

你的VUE項目的根目錄底下運行：

    npm install ele-table

2.引入本npm包并注冊為vue的組件：

例如：在需要使用的vue頁面中：

Calendar Attributes

參數	說明	類型	可選值	默認值
data	顯示的數據	array	—	—
treetable	是否樹形數據	boolean	—	false
_expand	樹形數據默認展開節點（不支持遞歸關聯）	boolean	—	false
draggablerow	是否開啟行拖拽	boolean	—	false
draggable	是否開啟單元格拖拽	boolean	—	false
allow-drag	能否被拖拽	Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event)	—	要求返回boolean
allow-drop	能否被放置	Function(row, column, cell, event, type)	—	要求返回boolean

Calendar Events

事件名	說明	參數
node-drag-start	節點開始拖拽時觸發的事件	Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event)
node-drag-enter	拖拽進入其他節點時觸發的事件	Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)
node-drag-leave	拖拽離開某個節點時觸發的事件	Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)
node-drag-over	在拖拽節點時觸發的事件	Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)
node-drag-end	拖拽結束時觸發的事件	Function(dragging(被拖拽節點對象), drop(放置節點對象), dropType(放置位置（before、after、inner）), event)
node-drop	拖拽完成時觸發的事件	Function(dragging(被拖拽節點對象), drop(放置節點對象), dropType(放置位置（before、after、inner）), event)

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

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

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

vue的生命周期解析并通過表單理解MVVM（不僅理論，圖文并茂）

摘要：在前端頁面中，把用純對象表示，負責顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關，還是只關注數據的變化。兩個組件的布爾值通過兩個臨近的按鈕控制，初始值和的結果都是。組件的聲明在組件上，則完全沒有進入生命周期。開始前說一說吐槽首先，文章有謬誤的地方，請評論，我會進行驗證修改。謝謝。 vue真是個好東西，但vue的中文文檔還有很大的改進空間，有點大雜燴的意思，對于怎么...

silvertheo 2019-08-22 14:56 評論0 收藏0
從源碼看Element UI Table組件實現思路

摘要：接下來來看一下是如何編寫一個組件的，在看源碼之前，首先還是要對他的組件的大致功能有一個了解，這樣我們在看源碼的時候才會知道這一段大概實現了什么功能。最后我實現的功能文檔以及最終的一個樣例在你實現一個組件過程中，一定要注意一下幾點將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數中（比如mounted），那么寫出來的組件代碼將非常丑陋，這樣子寫出的代碼也往往難以維護。...

moven_j 2019-08-20 16:32 評論0 收藏0
vue element-ui table組件動態生成表頭和數據并修改單元格格式父子組件通信

摘要：父組件定義表頭和表內容表格數據表頭數據引入并注冊子組件注冊子組件獲取表頭和表內容數據。父組件定義表頭和表內容 data(){ return{ // 表格數據 tableColumns: [], // 表頭數據 titleData:[], } } 引入并注冊子組件 import TableComponents from ../../compon...

supernavy 2019-08-26 10:48 評論0 收藏0
【Vue項目總結】基于餓了么組件封裝

摘要：項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是組件庫，在它的基礎上再次封裝。部分代碼三級效果如下總結組件是項目的積木條，公用組件的封裝成功與否其實是對項目的開發效率有直接影響。 vue項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是ElementUI組件庫，在它的基礎上再次封裝。可編輯表格由于是后臺管理項目，...

YPHP 2019-08-23 18:23 評論0 收藏0