成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Element ui Tree樹形控件介紹

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

點擊上方“IT那活兒”公眾號，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了！??！


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

一

常用屬性

結(jié)構(gòu)：
<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：使我們要展示的數(shù)據(jù)，從后端獲取。
  • prop：配置選項，defaultProps對象里的childen是那個屬性要作為標(biāo)簽的子樹。
  • label是那個屬性作為標(biāo)簽的值展示出來，在這里面，就是childen，label，實際中要以后端接口里面需要展示的字段為準(zhǔn)。
  • node-key:每個樹節(jié)點用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的。
  • check-on-click-node:只有在點擊復(fù)選框時才會選中節(jié)點。
  • default-expanded-keys：默認(rèn)展開的節(jié)點的 key 的數(shù)組。
  • show-checkbox：節(jié)點是否可被選擇。
  • default-checked-keys：默認(rèn)勾選的節(jié)點的 key 的數(shù)組，一榜用于回顯。
  • filter-node-method：節(jié)點過濾，常用于搜索。


二

自定義節(jié)點內(nèi)容

節(jié)點內(nèi)容可以自定義，可以在節(jié)點區(qū)域添加按鈕或圖標(biāo)等，比如添加，編輯，刪除按鈕。
兩種方法樹節(jié)點內(nèi)容自定義：
1. 使用render-content指定渲染函數(shù)，該函數(shù)返回需要的節(jié)點區(qū)內(nèi)容即可。
: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 會傳入兩個參數(shù)node和data，分別表示當(dāng)前節(jié)點的 Node 對象和當(dāng)前節(jié)點的數(shù)據(jù)。
class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}span>
<el-button>el-button>span>

</span>

三

節(jié)點拖拽

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

END




本文作者：朱 維（上海新炬王翦團(tuán)隊）

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/129428.html

相關(guān)文章

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

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

    MobService 評論0 收藏0

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

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

    Corwien 評論0 收藏0

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

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

    Pines_Cheng 評論0 收藏0

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

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

    wangdai 評論0 收藏0

發(fā)表評論

0條評論

IT那活兒

男|高級講師

TA的文章

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