国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Element ui Tree樹形控件介紹

IT那活兒 / 2686人閱讀
Element ui Tree樹形控件介紹

點擊上方“IT那活兒”公眾號，關注后了解更多內容，不管IT什么活兒，干就完了！！！


  
在很多時候我們需要進行菜單配置，element ui tree樹形控件就是非常好的選擇，el-tree有清晰的層級結構用來展示菜單信息，可展開，折疊或拖拽。

一

常用屬性

結構：
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">el-tree>
data: [
{ label: 一級 1,
children: [
{ label: 二級 1-1,
children: [{ label: 三級 1-1-1 }]
}]
}]
defaultProps: { children: children, label: label }
  • data：使我們要展示的數據，從后端獲取。
  • prop：配置選項，defaultProps對象里的childen是那個屬性要作為標簽的子樹。
  • label是那個屬性作為標簽的值展示出來，在這里面，就是childen，label，實際中要以后端接口里面需要展示的字段為準。
  • node-key:每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的。
  • check-on-click-node:只有在點擊復選框時才會選中節點。
  • default-expanded-keys：默認展開的節點的 key 的數組。
  • show-checkbox：節點是否可被選擇。
  • default-checked-keys：默認勾選的節點的 key 的數組，一榜用于回顯。
  • filter-node-method：節點過濾，常用于搜索。


二

自定義節點內容

節點內容可以自定義，可以在節點區域添加按鈕或圖標等，比如添加，編輯，刪除按鈕。
兩種方法樹節點內容自定義：
1. 使用render-content指定渲染函數，該函數返回需要的節點區內容即可。
:render-content="renderContent"
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}span>
  <span><el-button>el-button>span>
span>);
2. 使用 scoped slot 會傳入兩個參數node和data，分別表示當前節點的 Node 對象和當前節點的數據。
class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}span>
<el-button>el-button>span>

</span>

三

節點拖拽

1. draggable：是否開啟 拖拽功能。
2. allow-drop：拖拽時判定目標節點能否被放置。拖拽時判定目標節點能否被放置。type 參   數有三種情況：prev、inner 和 next，分別表示放置在目標節點前、插入至 目標節點和放置在目標節點后。
3. node-drop：拖拽成功觸發的事件 ，主要是我們把數據發給后端，被拖拽節點對應的 Node、結束拖拽時最后進入的節點、被拖拽節點的放置位置（before、after、 inner）、event。

END




本文作者：朱 維（上海新炬王翦團隊）

本文來源：“IT那活兒”公眾號

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

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

相關文章

  • element-ui中el-tree樹形控件-樹節點的選擇(選中當前節點,獲取當前id并且獲取其父級

    摘要：在的樹形控件中默認獲取選取當前選中的方法是但是如果子節點不是全部選中的話，父節點算不選中。由于我們一般想要的是就算只選中一個直接點父節點以及其父輩都算選中，所以需要自己寫邏輯。 在element-ui的el-tree樹形控件中默認獲取選取當前選中id的方法是this.$refs.tree.getCheckedKeys();但是如果子節點不是全部選中的話，父節點算不選中。由于我們一般想要...

    MobService 評論0 收藏0

  • 一個基于vue和element-ui的樹形穿梭框組件

    摘要：在市面上找到一個好用的樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在之外引入其他重量級插件，因此就有了。版本增加穿梭框左側右側數據勾選事件，穿梭框左側右側底部。 el-tree-transfer 簡介·請先閱讀文檔及版本說明 因為公司業務使用vue框架，ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在element-ui之...

    Corwien 評論0 收藏0

  • vue+element tree(樹形控件數據格式)組件(1)

    摘要：樹形控件數據格式組件最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數據格式)組件(1), 最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 首先說說需求，就是點擊出現彈窗+蒙板...

    Pines_Cheng 評論0 收藏0

  • vue+element tree(樹形控件數據格式)組件(1)

    摘要：樹形控件數據格式組件最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數據格式)組件(1), 最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 首先說說需求，就是點擊出現彈窗+蒙板...

    wangdai 評論0 收藏0

發表評論

0條評論

IT那活兒

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<