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

資訊專欄INFORMATION COLUMN

Element ui Tree樹形控件介紹

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

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


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

一

常用屬性

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


二

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

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

</span>

三

節(jié)點(diǎn)拖拽

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

END




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

本文來源：“IT那活兒”公眾號(hào)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/129428.html

相關(guān)文章

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

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

    MobService 評(píng)論0 收藏0

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

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

    Corwien 評(píng)論0 收藏0

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

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

    Pines_Cheng 評(píng)論0 收藏0

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

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

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<