w-component-vue
Version:
A simple component for vue(vue2).
1,326 lines (1,247 loc) • 65.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WTree - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav >
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WAggridVueDyn.html">WAggridVueDyn</a></li><li><a href="module-WBadge.html">WBadge</a></li><li><a href="module-WButtonChip.html">WButtonChip</a></li><li><a href="module-WButtonCircle.html">WButtonCircle</a></li><li><a href="module-WCheckbox.html">WCheckbox</a></li><li><a href="module-WCkeditorVueDyn.html">WCkeditorVueDyn</a></li><li><a href="module-WColorPickAlpha.html">WColorPickAlpha</a></li><li><a href="module-WColorPickHexagon.html">WColorPickHexagon</a></li><li><a href="module-WColorPickHexagonGray.html">WColorPickHexagonGray</a></li><li><a href="module-WColorPickHsv.html">WColorPickHsv</a></li><li><a href="module-WColorPickHue.html">WColorPickHue</a></li><li><a href="module-WColorPickStripe.html">WColorPickStripe</a></li><li><a href="module-WColorSelect.html">WColorSelect</a></li><li><a href="module-WColorSelectInput.html">WColorSelectInput</a></li><li><a href="module-WColorSelectPanel.html">WColorSelectPanel</a></li><li><a href="module-WColorSelectPanelBlock.html">WColorSelectPanelBlock</a></li><li><a href="module-WColorSelectPanelHsva.html">WColorSelectPanelHsva</a></li><li><a href="module-WConfirm.html">WConfirm</a></li><li><a href="module-WDialog.html">WDialog</a></li><li><a href="module-WDrawer.html">WDrawer</a></li><li><a href="module-WDropfiles.html">WDropfiles</a></li><li><a href="module-WDynamicList.html">WDynamicList</a></li><li><a href="module-WEchartsVueDyn.html">WEchartsVueDyn</a></li><li><a href="module-WExplorer.html">WExplorer</a></li><li><a href="module-WGroupBaggage.html">WGroupBaggage</a></li><li><a href="module-WGroupChipCheck.html">WGroupChipCheck</a></li><li><a href="module-WGroupChipRadio.html">WGroupChipRadio</a></li><li><a href="module-WGroupDragdrop.html">WGroupDragdrop</a></li><li><a href="module-WGroupIconCheck.html">WGroupIconCheck</a></li><li><a href="module-WGroupIconRadio.html">WGroupIconRadio</a></li><li><a href="module-WGroupTags.html">WGroupTags</a></li><li><a href="module-WHighchartsBitmapDyn.html">WHighchartsBitmapDyn</a></li><li><a href="module-WHighchartsVueDyn.html">WHighchartsVueDyn</a></li><li><a href="module-WHighstockVueDyn.html">WHighstockVueDyn</a></li><li><a href="module-WIcon.html">WIcon</a></li><li><a href="module-WIconLoading.html">WIconLoading</a></li><li><a href="module-WImageCascadingDyn.html">WImageCascadingDyn</a></li><li><a href="module-WImageLazy.html">WImageLazy</a></li><li><a href="module-WImageViewerDyn.html">WImageViewerDyn</a></li><li><a href="module-WInputCheckbox.html">WInputCheckbox</a></li><li><a href="module-WInputRadio.html">WInputRadio</a></li><li><a href="module-WJsonView.html">WJsonView</a></li><li><a href="module-WLeafletVueDyn.html">WLeafletVueDyn</a></li><li><a href="module-WLevelGrade.html">WLevelGrade</a></li><li><a href="module-WListCheck.html">WListCheck</a></li><li><a href="module-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</a></li><li><a href="module-WListHorizontal.html">WListHorizontal</a></li><li><a href="module-WListItem.html">WListItem</a></li><li><a href="module-WListRadio.html">WListRadio</a></li><li><a href="module-WListVertical.html">WListVertical</a></li><li><a href="module-WPanelAvatar.html">WPanelAvatar</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelDivideHorizontal.html">WPanelDivideHorizontal</a></li><li><a href="module-WPanelDivideVertical.html">WPanelDivideVertical</a></li><li><a href="module-WPanelLabelItem.html">WPanelLabelItem</a></li><li><a href="module-WPanelScale.html">WPanelScale</a></li><li><a href="module-WPanelScrolly.html">WPanelScrolly</a></li><li><a href="module-WPanelScrollyCore.html">WPanelScrollyCore</a></li><li><a href="module-WPanelStripe.html">WPanelStripe</a></li><li><a href="module-WPopup.html">WPopup</a></li><li><a href="module-WPopupEditText.html">WPopupEditText</a></li><li><a href="module-WProgressBar.html">WProgressBar</a></li><li><a href="module-WProgressCircle.html">WProgressCircle</a></li><li><a href="module-WQuillVueDyn.html">WQuillVueDyn</a></li><li><a href="module-WSegmentsVertical.html">WSegmentsVertical</a></li><li><a href="module-WShellBottomLine.html">WShellBottomLine</a></li><li><a href="module-WShellEllipse.html">WShellEllipse</a></li><li><a href="module-WSlider.html">WSlider</a></li><li><a href="module-WSwitch.html">WSwitch</a></li><li><a href="module-WTableDyn.html">WTableDyn</a></li><li><a href="module-WText.html">WText</a></li><li><a href="module-WTextCore.html">WTextCore</a></li><li><a href="module-WTextInt.html">WTextInt</a></li><li><a href="module-WTextIntCore.html">WTextIntCore</a></li><li><a href="module-WTextSelect.html">WTextSelect</a></li><li><a href="module-WTextSuggest.html">WTextSuggest</a></li><li><a href="module-WTextSuggestCore.html">WTextSuggestCore</a></li><li><a href="module-WTextarea.html">WTextarea</a></li><li><a href="module-WTextareaCore.html">WTextareaCore</a></li><li><a href="module-WThreejsVueDyn.html">WThreejsVueDyn</a></li><li><a href="module-WTimeday.html">WTimeday</a></li><li><a href="module-WTimedayCore.html">WTimedayCore</a></li><li><a href="module-WTimedayCoreRe.html">WTimedayCoreRe</a></li><li><a href="module-WTimedayRange.html">WTimedayRange</a></li><li><a href="module-WTimedayRangeCore.html">WTimedayRangeCore</a></li><li><a href="module-WTimeminute.html">WTimeminute</a></li><li><a href="module-WTimeminuteCore.html">WTimeminuteCore</a></li><li><a href="module-WTimeminuteRange.html">WTimeminuteRange</a></li><li><a href="module-WTimeminuteRangeCore.html">WTimeminuteRangeCore</a></li><li><a href="module-WTinymceVueDyn.html">WTinymceVueDyn</a></li><li><a href="module-WTooltip.html">WTooltip</a></li><li><a href="module-WTree.html">WTree</a></li><li><a href="module-WTreeIconCheckbox.html">WTreeIconCheckbox</a></li><li><a href="module-WTreeIconToggle.html">WTreeIconToggle</a></li><li><a href="module-WVditorDyn.html">WVditorDyn</a></li></ul><h3>Global</h3><ul><li><a href="global.html#binarySearch">binarySearch</a></li><li><a href="global.html#convertColor">convertColor</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">WTree</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-description">Description:</dt>
<dd class="tag-description"><ul class="dummy"><li></p></div></div>
<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3>
<table data-jsdoc-vuejs="table-props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Required?</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td><code>data</code></td>
<td>Array|Object</td>
<td><code>[]</code></td>
<td>No</td>
<td>輸入資料陣列，預設[]，各元素配合slot顯示即可，slot內提供row與irow，對應原始rows內各元素與指標，另外各元素slot時不要用margin避免計算高度有誤差</td>
</tr><tr>
<td><code>viewHeightMax</code></td>
<td>Number</td>
<td><code>400</code></td>
<td>No</td>
<td>輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400</td>
</tr><tr>
<td><code>defaultDisplayLevel</code></td>
<td>Number</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null</td>
</tr><tr>
<td><code>activable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否使用主動模式布林值，預設false</td>
</tr><tr>
<td><code>funActive</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入主動模式時處理點擊項目函數，回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null</td>
</tr><tr>
<td><code>itemActive</code></td>
<td>Object</td>
<td><code>{}</code></td>
<td>No</td>
<td>輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}</td>
</tr><tr>
<td><code>selectable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否具有勾選模式布林值，預設false</td>
</tr><tr>
<td><code>selections</code></td>
<td>Array</td>
<td><code>[]</code></td>
<td>No</td>
<td>輸入勾選項目陣列，當selectable=true時才可使用，預設[]</td>
</tr><tr>
<td><code>keyPrimary</code></td>
<td>String</td>
<td><code>'id'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，主鍵之欄位字串，預設'id'</td>
</tr><tr>
<td><code>keyText</code></td>
<td>String</td>
<td><code>'text'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，顯示文字之欄位字串，預設'text'</td>
</tr><tr>
<td><code>keyChildren</code></td>
<td>String</td>
<td><code>'children'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，所屬子項目之欄位字串，預設'children'</td>
</tr><tr>
<td><code>keyLock</code></td>
<td>String</td>
<td><code>'locked'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，禁止勾選之欄位字串，物件給予此欄位需為布林值，預設'locked'</td>
</tr><tr>
<td><code>paddingStyle</code></td>
<td>Object</td>
<td><code>{v:0,h:0}</code></td>
<td>No</td>
<td>輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}</td>
</tr><tr>
<td><code>indent</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1</td>
</tr><tr>
<td><code>iconSize</code></td>
<td>Number</td>
<td><code>24</code></td>
<td>No</td>
<td>輸入顯隱與核選icon按鈕高度數字，單位為px，預設24</td>
</tr><tr>
<td><code>iconToggleColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconToggleDisabledColor</code></td>
<td>String</td>
<td><code>'grey lighten-1'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
</tr><tr>
<td><code>iconToggleBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>iconToggleBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(128,128,128,0.15)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'</td>
</tr><tr>
<td><code>iconUncheckedColor</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入核選icon未勾選時顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>iconUncheckedDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時未勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconCheckedColor</code></td>
<td>String</td>
<td><code>'blue darken-3'</code></td>
<td>No</td>
<td>輸入核選icon勾選時顏色字串，預設'blue darken-3'</td>
</tr><tr>
<td><code>iconCheckedDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconCheckedPartiallyColor</code></td>
<td>String</td>
<td><code>'blue darken-3'</code></td>
<td>No</td>
<td>輸入核選icon部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'</td>
</tr><tr>
<td><code>iconCheckedPartiallyDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時部份勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>filterKeywords</code></td>
<td>String</td>
<td><code>''</code></td>
<td>No</td>
<td>輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''</td>
</tr><tr>
<td><code>funFilter</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入過濾時呼叫處理函數，可使用sync或async函數，傳入為各項目物件資料，若為sync函數回傳布林值，若為async函數等待resolve結果為布林值，代表項目內是否含有關鍵字，預設null</td>
</tr><tr>
<td><code>loadingText</code></td>
<td>String</td>
<td><code>'Loading...'</code></td>
<td>No</td>
<td>輸入載入中字串，預設'Loading...'</td>
</tr><tr>
<td><code>noResultsText</code></td>
<td>String</td>
<td><code>'No results'</code></td>
<td>No</td>
<td>輸入無過濾結果字串，預設'No results'</td>
</tr><tr>
<td><code>searchingText</code></td>
<td>String</td>
<td><code>'Searching...'</code></td>
<td>No</td>
<td>輸入搜索中字串，預設'Searching...'</td>
</tr><tr>
<td><code>defItemHeight</code></td>
<td>Number</td>
<td><code>34</code></td>
<td>No</td>
<td>輸入按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34</td>
</tr><tr>
<td><code>itemsPreload</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>No</td>
<td>輸入上下方預先載入元素數量，預設5</td>
</tr><tr>
<td><code>itemTextColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入文字顏色字串，預設'#444'</td>
</tr><tr>
<td><code>itemTextColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時文字顏色字串，預設'#222'</td>
</tr><tr>
<td><code>itemTextColorActive</code></td>
<td>String</td>
<td><code>'#d72'</code></td>
<td>No</td>
<td>輸入主動模式時文字顏色字串，預設'#d72'</td>
</tr><tr>
<td><code>itemBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>itemBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.2)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'</td>
</tr><tr>
<td><code>itemBackgroundColorActive</code></td>
<td>String</td>
<td><code>'rgba(255,167,38,0.2)'</code></td>
<td>No</td>
<td>輸入主動模式時背景顏色字串，預設'rgba(255,167,38,0.2)'</td>
</tr><tr>
<td><code>itemRippleColor</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.4)'</code></td>
<td>No</td>
<td>輸入ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td>
</tr><tr>
<td><code>draggable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false</td>
</tr><tr>
<td><code>dgTextDisabled</code></td>
<td>String</td>
<td><code>'Can not drop here'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字字串，預設'Can not drop here'</td>
</tr><tr>
<td><code>dgTextDisabledColor</code></td>
<td>String</td>
<td><code>'#812'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字顏色字串，預設'#812'</td>
</tr><tr>
<td><code>dgTextDisabledPaddingLeft</code></td>
<td>Number</td>
<td><code>15</code></td>
<td>No</td>
<td>輸入禁止拖曳padding-left數字，單位px，預設15</td>
</tr><tr>
<td><code>dgTextDisabledFontSize</code></td>
<td>String</td>
<td><code>'0.9rem'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字大小字串，預設'0.9rem'</td>
</tr><tr>
<td><code>dgTextDisabledBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(255,220,240,0.6)'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字區背景顏色字串，預設'rgba(255,220,240,0.6)'</td>
</tr><tr>
<td><code>dgInsertLineColor</code></td>
<td>String</td>
<td><code>'#29f'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域線顏色字串，預設'#29f'</td>
</tr><tr>
<td><code>dgInsertBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(80,150,255,0.15)'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域背景顏色字串，預設'rgba(80,150,255,0.15)'</td>
</tr><tr>
<td><code>dgBelongBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(80,150,255,0.3)'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域(成為目標的子節點)背景顏色字串，預設'rgba(80,150,255,0.3)'</td>
</tr><tr>
<td><code>dgPreviewOpacity</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素透明度數字，預設1</td>
</tr><tr>
<td><code>dgPreviewDisabledOpacity</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入無效時(位於非可拖曳元素內)拖曳時預覽元素透明度數字，預設1</td>
</tr><tr>
<td><code>dgPreviewBorderWidth</code></td>
<td>Number</td>
<td><code>0</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素邊框寬度數字，單位px，預設0</td>
</tr><tr>
<td><code>dgPreviewBorderColor</code></td>
<td>String</td>
<td><code>'#f26'</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素邊框顏色字串，預設'#f26'</td>
</tr><tr>
<td><code>dgPreviewBackground</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operatable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false</td>
</tr><tr>
<td><code>operateItemTextForRename</code></td>
<td>String</td>
<td><code>'Rename'</code></td>
<td>No</td>
<td>輸入控制選項變更文字之文字字串，預設'Rename'</td>
</tr><tr>
<td><code>operateItemTextForInsertBefore</code></td>
<td>String</td>
<td><code>'Insert before'</code></td>
<td>No</td>
<td>輸入控制選項插入前項目之文字字串，預設'Insert before'</td>
</tr><tr>
<td><code>operateItemTextForInsertChild</code></td>
<td>String</td>
<td><code>'Insert child'</code></td>
<td>No</td>
<td>輸入控制選項插入子項目之文字字串，預設'Insert child'</td>
</tr><tr>
<td><code>operateItemTextForInsertAfter</code></td>
<td>String</td>
<td><code>'Insert after'</code></td>
<td>No</td>
<td>輸入控制選項插入後項目之文字字串，預設'Insert after'</td>
</tr><tr>
<td><code>operateItemTextForDelete</code></td>
<td>String</td>
<td><code>'Delete'</code></td>
<td>No</td>
<td>輸入控制選項刪除項目之文字字串，預設'Delete'</td>
</tr><tr>
<td><code>operateItemIconForRename</code></td>
<td>String</td>
<td><code>mdiRenameOutline</code></td>
<td>No</td>
<td>輸入控制選項變更文字之圖標字串，預設mdiRenameOutline</td>
</tr><tr>
<td><code>operateItemIconForInsertBefore</code></td>
<td>String</td>
<td><code>mdiFormatVerticalAlignTop</code></td>
<td>No</td>
<td>輸入控制選項插入前項目之圖標字串，預設mdiFormatVerticalAlignTop</td>
</tr><tr>
<td><code>operateItemIconForInsertChild</code></td>
<td>String</td>
<td><code>mdiFormatHorizontalAlignRight</code></td>
<td>No</td>
<td>輸入控制選項插入子項目之圖標字串，預設mdiFormatHorizontalAlignRight</td>
</tr><tr>
<td><code>operateItemIconForInsertAfter</code></td>
<td>String</td>
<td><code>mdiFormatVerticalAlignBottom</code></td>
<td>No</td>
<td>輸入控制選項插入後項目之圖標字串，預設mdiFormatVerticalAlignBottom</td>
</tr><tr>
<td><code>operateItemIconForDelete</code></td>
<td>String</td>
<td><code>mdiClose</code></td>
<td>No</td>
<td>輸入控制選項刪除項目之圖標字串，預設mdiClose</td>
</tr><tr>
<td><code>operateItemPaddingStyle</code></td>
<td>Object</td>
<td><code>{v:10,h:12}</code></td>
<td>No</td>
<td>輸入控制選項內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}</td>
</tr><tr>
<td><code>operatePanelWidth</code></td>
<td>Number</td>
<td><code>150</code></td>
<td>No</td>
<td>輸入控制選項寬度數字，單位px，預設150</td>
</tr><tr>
<td><code>operatePanelHeight</code></td>
<td>Number</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null</td>
</tr><tr>
<td><code>operateBtnTooltip</code></td>
<td>String</td>
<td><code>'Operations'</code></td>
<td>No</td>
<td>輸入控制按鈕之提示文字字串，預設'Operations'</td>
</tr><tr>
<td><code>operateBtnIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入控制按鈕圖標尺寸數字，單位px，預設22</td>
</tr><tr>
<td><code>operateBtnBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入控制按鈕背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operateBtnBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(230,230,230,0.7)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'</td>
</tr><tr>
<td><code>operateBtnBackgroundColorFocus</code></td>
<td>String</td>
<td><code>'rgba(230,230,230,0.9)'</code></td>
<td>No</td>
<td>輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'</td>
</tr><tr>
<td><code>operateItemBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入控制項目背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operateItemBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.2)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目背景顏色字串，預設'rgba(200,200,200,0.2)'</td>
</tr><tr>
<td><code>operateItemHeight</code></td>
<td>Number</td>
<td><code>42</code></td>
<td>No</td>
<td>輸入控制項目高度數字，單位px，預設42</td>
</tr><tr>
<td><code>operateItemTextColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入控制項目文字顏色字串，預設'#444'</td>
</tr><tr>
<td><code>operateItemTextColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目文字顏色字串，預設'#222'</td>
</tr><tr>
<td><code>operateItemIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入控制項目圖標尺寸數字，單位px，預設22</td>
</tr><tr>
<td><code>operateItemIconColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入控制項目圖標顏色字串，預設'#444'</td>
</tr><tr>
<td><code>operateItemIconColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'</td>
</tr><tr>
<td><code>funOperateItem</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入使用控制節點模式時處理項目函數，回傳陣列代表該項目提供指定控制按鈕，回傳true代表提供全部控制按鈕，回傳false或空陣列代表不提供控制按鈕，可應用於檔案清單之根目錄禁用控制節點模式或特定項目採用控制節點模式，預設null</td>
</tr><tr>
<td><code>editorRenameContentBackgroundColor</code></td>
<td>String</td>
<td><code>'white'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之內容區塊背景顏色字串，預設'white'</td>
</tr><tr>
<td><code>editorRenameFooterBackgroundColor</code></td>
<td>String</td>
<td><code>'grey lighten-5'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之下方區背景顏色字串，預設'grey lighten-5'</td>
</tr><tr>
<td><code>editorRenameInputTextColor</code></td>
<td>String</td>
<td><code>'grey darken-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之文字顏色字串，預設'grey darken-3'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColor</code></td>
<td>String</td>
<td><code>'grey lighten-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColorHover</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColorFocus</code></td>
<td>String</td>
<td><code>'blue darken-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'</td>
</tr><tr>
<td><code>editorRenameCancelBtnText</code></td>
<td>String</td>
<td><code>'Cancel'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕文字字串，預設'Cancel'</td>
</tr><tr>
<td><code>editorRenameCancelBtnTextColor</code></td>
<td>String</td>
<td><code>'grey darken-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'</td>
</tr><tr>
<td><code>editorRenameCancelBtnTextColorHover</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時取消按鈕文字顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>editorRenameCancelBtnIcon</code></td>
<td>String</td>
<td><code>mdiCloseCircleOutline</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCloseCircleOutline</td>
</tr><tr>
<td><code>editorRenameCancelBtnIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕圖標大小，單位為px，預設22</td>
</tr><tr>
<td><code>editorRenameCancelBtnIconColor</code></td>
<td>String</td>
<td><code>'grey darken-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕圖標顏色字串，預設'grey darken-1'</td>
</tr><tr>
<td><code>editorRenameCancelBtnIconColorHover</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時取消按鈕圖標顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>editorRenameCancelBtnIconRippleColor</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.4)'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td>
</tr><tr>
<td><code>editorRenameCancelBtnBackgroundColor</code></td>
<td>String</td>
<td><code>'white'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕背景顏色字串，預設'white'</td>
</tr><tr>
<td><code>editorRenameCancelBtnBackgroundColorHover</code></td>
<td>String</td>
<td><code>'grey lighten-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時取消按鈕背景顏色字串，預設'grey lighten-3'</td>
</tr><tr>
<td><code>editorRenameSaveBtnText</code></td>
<td>String</td>
<td><code>'Save'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕文字字串，預設'Save'</td>
</tr><tr>
<td><code>editorRenameSaveBtnTextColor</code></td>
<td>String</td>
<td><code>'grey darken-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕文字顏色字串，預設'grey darken-3'</td>
</tr><tr>
<td><code>editorRenameSaveBtnTextColorHover</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時儲存按鈕文字顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>editorRenameSaveBtnIcon</code></td>
<td>String</td>
<td><code>mdiCloudUploadOutline</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarkedCircle</td>
</tr><tr>
<td><code>editorRenameSaveBtnIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕圖標大小，單位為px，預設22</td>
</tr><tr>
<td><code>editorRenameSaveBtnIconColor</code></td>
<td>String</td>
<td><code>'grey darken-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕圖標顏色字串，預設'grey darken-1'</td>
</tr><tr>
<td><code>editorRenameSaveBtnIconColorHover</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時儲存按鈕圖標顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>editorRenameSaveBtnIconRippleColor</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.4)'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td>
</tr><tr>
<td><code>editorRenameSaveBtnBackgroundColor</code></td>
<td>String</td>
<td><code>'white'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之儲存按鈕背景顏色字串，預設'white'</td>
</tr><tr>
<td><code>editorRenameSaveBtnBackgroundColorHover</code></td>
<td>String</td>
<td><code>'grey lighten-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'</td>
</tr><tr>
<td><code>show</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>No</td>
<td>輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題</td>
</tr></tbody>
</table>
<div class="container-overview"><div><p>
</li></ul></dd>
</dl>
<div class="description usertext"></p></div></div>
<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3>
<table data-jsdoc-vuejs="table-props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Required?</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td><code>data</code></td>
<td>Array|Object</td>
<td><code>[]</code></td>
<td>No</td>
<td>輸入資料陣列，預設[]，各元素配合slot顯示即可，slot內提供row與irow，對應原始rows內各元素與指標，另外各元素slot時不要用margin避免計算高度有誤差</td>
</tr><tr>
<td><code>viewHeightMax</code></td>
<td>Number</td>
<td><code>400</code></td>
<td>No</td>
<td>輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400</td>
</tr><tr>
<td><code>defaultDisplayLevel</code></td>
<td>Number</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null</td>
</tr><tr>
<td><code>activable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否使用主動模式布林值，預設false</td>
</tr><tr>
<td><code>funActive</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入主動模式時處理點擊項目函數，回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null</td>
</tr><tr>
<td><code>itemActive</code></td>
<td>Object</td>
<td><code>{}</code></td>
<td>No</td>
<td>輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}</td>
</tr><tr>
<td><code>selectable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否具有勾選模式布林值，預設false</td>
</tr><tr>
<td><code>selections</code></td>
<td>Array</td>
<td><code>[]</code></td>
<td>No</td>
<td>輸入勾選項目陣列，當selectable=true時才可使用，預設[]</td>
</tr><tr>
<td><code>keyPrimary</code></td>
<td>String</td>
<td><code>'id'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，主鍵之欄位字串，預設'id'</td>
</tr><tr>
<td><code>keyText</code></td>
<td>String</td>
<td><code>'text'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，顯示文字之欄位字串，預設'text'</td>
</tr><tr>
<td><code>keyChildren</code></td>
<td>String</td>
<td><code>'children'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，所屬子項目之欄位字串，預設'children'</td>
</tr><tr>
<td><code>keyLock</code></td>
<td>String</td>
<td><code>'locked'</code></td>
<td>No</td>
<td>輸入可選項目為物件時，禁止勾選之欄位字串，物件給予此欄位需為布林值，預設'locked'</td>
</tr><tr>
<td><code>paddingStyle</code></td>
<td>Object</td>
<td><code>{v:0,h:0}</code></td>
<td>No</td>
<td>輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}</td>
</tr><tr>
<td><code>indent</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1</td>
</tr><tr>
<td><code>iconSize</code></td>
<td>Number</td>
<td><code>24</code></td>
<td>No</td>
<td>輸入顯隱與核選icon按鈕高度數字，單位為px，預設24</td>
</tr><tr>
<td><code>iconToggleColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconToggleDisabledColor</code></td>
<td>String</td>
<td><code>'grey lighten-1'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
</tr><tr>
<td><code>iconToggleBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入顯隱icon按鈕背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>iconToggleBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(128,128,128,0.15)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'</td>
</tr><tr>
<td><code>iconUncheckedColor</code></td>
<td>String</td>
<td><code>'grey darken-2'</code></td>
<td>No</td>
<td>輸入核選icon未勾選時顏色字串，預設'grey darken-2'</td>
</tr><tr>
<td><code>iconUncheckedDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時未勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconCheckedColor</code></td>
<td>String</td>
<td><code>'blue darken-3'</code></td>
<td>No</td>
<td>輸入核選icon勾選時顏色字串，預設'blue darken-3'</td>
</tr><tr>
<td><code>iconCheckedDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>iconCheckedPartiallyColor</code></td>
<td>String</td>
<td><code>'blue darken-3'</code></td>
<td>No</td>
<td>輸入核選icon部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'</td>
</tr><tr>
<td><code>iconCheckedPartiallyDisabledColor</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入核選icon禁用時部份勾選時顏色字串，預設'grey'</td>
</tr><tr>
<td><code>filterKeywords</code></td>
<td>String</td>
<td><code>''</code></td>
<td>No</td>
<td>輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''</td>
</tr><tr>
<td><code>funFilter</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入過濾時呼叫處理函數，可使用sync或async函數，傳入為各項目物件資料，若為sync函數回傳布林值，若為async函數等待resolve結果為布林值，代表項目內是否含有關鍵字，預設null</td>
</tr><tr>
<td><code>loadingText</code></td>
<td>String</td>
<td><code>'Loading...'</code></td>
<td>No</td>
<td>輸入載入中字串，預設'Loading...'</td>
</tr><tr>
<td><code>noResultsText</code></td>
<td>String</td>
<td><code>'No results'</code></td>
<td>No</td>
<td>輸入無過濾結果字串，預設'No results'</td>
</tr><tr>
<td><code>searchingText</code></td>
<td>String</td>
<td><code>'Searching...'</code></td>
<td>No</td>
<td>輸入搜索中字串，預設'Searching...'</td>
</tr><tr>
<td><code>defItemHeight</code></td>
<td>Number</td>
<td><code>34</code></td>
<td>No</td>
<td>輸入按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34</td>
</tr><tr>
<td><code>itemsPreload</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>No</td>
<td>輸入上下方預先載入元素數量，預設5</td>
</tr><tr>
<td><code>itemTextColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入文字顏色字串，預設'#444'</td>
</tr><tr>
<td><code>itemTextColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時文字顏色字串，預設'#222'</td>
</tr><tr>
<td><code>itemTextColorActive</code></td>
<td>String</td>
<td><code>'#d72'</code></td>
<td>No</td>
<td>輸入主動模式時文字顏色字串，預設'#d72'</td>
</tr><tr>
<td><code>itemBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>itemBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.2)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'</td>
</tr><tr>
<td><code>itemBackgroundColorActive</code></td>
<td>String</td>
<td><code>'rgba(255,167,38,0.2)'</code></td>
<td>No</td>
<td>輸入主動模式時背景顏色字串，預設'rgba(255,167,38,0.2)'</td>
</tr><tr>
<td><code>itemRippleColor</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.4)'</code></td>
<td>No</td>
<td>輸入ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td>
</tr><tr>
<td><code>draggable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false</td>
</tr><tr>
<td><code>dgTextDisabled</code></td>
<td>String</td>
<td><code>'Can not drop here'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字字串，預設'Can not drop here'</td>
</tr><tr>
<td><code>dgTextDisabledColor</code></td>
<td>String</td>
<td><code>'#812'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字顏色字串，預設'#812'</td>
</tr><tr>
<td><code>dgTextDisabledPaddingLeft</code></td>
<td>Number</td>
<td><code>15</code></td>
<td>No</td>
<td>輸入禁止拖曳padding-left數字，單位px，預設15</td>
</tr><tr>
<td><code>dgTextDisabledFontSize</code></td>
<td>String</td>
<td><code>'0.9rem'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字大小字串，預設'0.9rem'</td>
</tr><tr>
<td><code>dgTextDisabledBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(255,220,240,0.6)'</code></td>
<td>No</td>
<td>輸入禁止拖曳文字區背景顏色字串，預設'rgba(255,220,240,0.6)'</td>
</tr><tr>
<td><code>dgInsertLineColor</code></td>
<td>String</td>
<td><code>'#29f'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域線顏色字串，預設'#29f'</td>
</tr><tr>
<td><code>dgInsertBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(80,150,255,0.15)'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域背景顏色字串，預設'rgba(80,150,255,0.15)'</td>
</tr><tr>
<td><code>dgBelongBackgroundColor</code></td>
<td>String</td>
<td><code>'rgba(80,150,255,0.3)'</code></td>
<td>No</td>
<td>輸入拖曳時顯示插入區域(成為目標的子節點)背景顏色字串，預設'rgba(80,150,255,0.3)'</td>
</tr><tr>
<td><code>dgPreviewOpacity</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素透明度數字，預設1</td>
</tr><tr>
<td><code>dgPreviewDisabledOpacity</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>No</td>
<td>輸入無效時(位於非可拖曳元素內)拖曳時預覽元素透明度數字，預設1</td>
</tr><tr>
<td><code>dgPreviewBorderWidth</code></td>
<td>Number</td>
<td><code>0</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素邊框寬度數字，單位px，預設0</td>
</tr><tr>
<td><code>dgPreviewBorderColor</code></td>
<td>String</td>
<td><code>'#f26'</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素邊框顏色字串，預設'#f26'</td>
</tr><tr>
<td><code>dgPreviewBackground</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入拖曳時預覽元素背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operatable</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>No</td>
<td>輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false</td>
</tr><tr>
<td><code>operateItemTextForRename</code></td>
<td>String</td>
<td><code>'Rename'</code></td>
<td>No</td>
<td>輸入控制選項變更文字之文字字串，預設'Rename'</td>
</tr><tr>
<td><code>operateItemTextForInsertBefore</code></td>
<td>String</td>
<td><code>'Insert before'</code></td>
<td>No</td>
<td>輸入控制選項插入前項目之文字字串，預設'Insert before'</td>
</tr><tr>
<td><code>operateItemTextForInsertChild</code></td>
<td>String</td>
<td><code>'Insert child'</code></td>
<td>No</td>
<td>輸入控制選項插入子項目之文字字串，預設'Insert child'</td>
</tr><tr>
<td><code>operateItemTextForInsertAfter</code></td>
<td>String</td>
<td><code>'Insert after'</code></td>
<td>No</td>
<td>輸入控制選項插入後項目之文字字串，預設'Insert after'</td>
</tr><tr>
<td><code>operateItemTextForDelete</code></td>
<td>String</td>
<td><code>'Delete'</code></td>
<td>No</td>
<td>輸入控制選項刪除項目之文字字串，預設'Delete'</td>
</tr><tr>
<td><code>operateItemIconForRename</code></td>
<td>String</td>
<td><code>mdiRenameOutline</code></td>
<td>No</td>
<td>輸入控制選項變更文字之圖標字串，預設mdiRenameOutline</td>
</tr><tr>
<td><code>operateItemIconForInsertBefore</code></td>
<td>String</td>
<td><code>mdiFormatVerticalAlignTop</code></td>
<td>No</td>
<td>輸入控制選項插入前項目之圖標字串，預設mdiFormatVerticalAlignTop</td>
</tr><tr>
<td><code>operateItemIconForInsertChild</code></td>
<td>String</td>
<td><code>mdiFormatHorizontalAlignRight</code></td>
<td>No</td>
<td>輸入控制選項插入子項目之圖標字串，預設mdiFormatHorizontalAlignRight</td>
</tr><tr>
<td><code>operateItemIconForInsertAfter</code></td>
<td>String</td>
<td><code>mdiFormatVerticalAlignBottom</code></td>
<td>No</td>
<td>輸入控制選項插入後項目之圖標字串，預設mdiFormatVerticalAlignBottom</td>
</tr><tr>
<td><code>operateItemIconForDelete</code></td>
<td>String</td>
<td><code>mdiClose</code></td>
<td>No</td>
<td>輸入控制選項刪除項目之圖標字串，預設mdiClose</td>
</tr><tr>
<td><code>operateItemPaddingStyle</code></td>
<td>Object</td>
<td><code>{v:10,h:12}</code></td>
<td>No</td>
<td>輸入控制選項內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}</td>
</tr><tr>
<td><code>operatePanelWidth</code></td>
<td>Number</td>
<td><code>150</code></td>
<td>No</td>
<td>輸入控制選項寬度數字，單位px，預設150</td>
</tr><tr>
<td><code>operatePanelHeight</code></td>
<td>Number</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null</td>
</tr><tr>
<td><code>operateBtnTooltip</code></td>
<td>String</td>
<td><code>'Operations'</code></td>
<td>No</td>
<td>輸入控制按鈕之提示文字字串，預設'Operations'</td>
</tr><tr>
<td><code>operateBtnIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入控制按鈕圖標尺寸數字，單位px，預設22</td>
</tr><tr>
<td><code>operateBtnBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入控制按鈕背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operateBtnBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(230,230,230,0.7)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'</td>
</tr><tr>
<td><code>operateBtnBackgroundColorFocus</code></td>
<td>String</td>
<td><code>'rgba(230,230,230,0.9)'</code></td>
<td>No</td>
<td>輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'</td>
</tr><tr>
<td><code>operateItemBackgroundColor</code></td>
<td>String</td>
<td><code>'transparent'</code></td>
<td>No</td>
<td>輸入控制項目背景顏色字串，預設'transparent'</td>
</tr><tr>
<td><code>operateItemBackgroundColorHover</code></td>
<td>String</td>
<td><code>'rgba(200,200,200,0.2)'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目背景顏色字串，預設'rgba(200,200,200,0.2)'</td>
</tr><tr>
<td><code>operateItemHeight</code></td>
<td>Number</td>
<td><code>42</code></td>
<td>No</td>
<td>輸入控制項目高度數字，單位px，預設42</td>
</tr><tr>
<td><code>operateItemTextColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入控制項目文字顏色字串，預設'#444'</td>
</tr><tr>
<td><code>operateItemTextColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目文字顏色字串，預設'#222'</td>
</tr><tr>
<td><code>operateItemIconSize</code></td>
<td>Number</td>
<td><code>22</code></td>
<td>No</td>
<td>輸入控制項目圖標尺寸數字，單位px，預設22</td>
</tr><tr>
<td><code>operateItemIconColor</code></td>
<td>String</td>
<td><code>'#444'</code></td>
<td>No</td>
<td>輸入控制項目圖標顏色字串，預設'#444'</td>
</tr><tr>
<td><code>operateItemIconColorHover</code></td>
<td>String</td>
<td><code>'#222'</code></td>
<td>No</td>
<td>輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'</td>
</tr><tr>
<td><code>funOperateItem</code></td>
<td>function</td>
<td><code>null</code></td>
<td>No</td>
<td>輸入使用控制節點模式時處理項目函數，回傳陣列代表該項目提供指定控制按鈕，回傳true代表提供全部控制按鈕，回傳false或空陣列代表不提供控制按鈕，可應用於檔案清單之根目錄禁用控制節點模式或特定項目採用控制節點模式，預設null</td>
</tr><tr>
<td><code>editorRenameContentBackgroundColor</code></td>
<td>String</td>
<td><code>'white'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之內容區塊背景顏色字串，預設'white'</td>
</tr><tr>
<td><code>editorRenameFooterBackgroundColor</code></td>
<td>String</td>
<td><code>'grey lighten-5'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之下方區背景顏色字串，預設'grey lighten-5'</td>
</tr><tr>
<td><code>editorRenameInputTextColor</code></td>
<td>String</td>
<td><code>'grey darken-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之文字顏色字串，預設'grey darken-3'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColor</code></td>
<td>String</td>
<td><code>'grey lighten-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColorHover</code></td>
<td>String</td>
<td><code>'grey'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'</td>
</tr><tr>
<td><code>editorRenameInputTextBottomLineBorderColorFocus</code></td>
<td>String</td>
<td><code>'blue darken-1'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'</td>
</tr><tr>
<td><code>editorRenameCancelBtnText</code></td>
<td>String</td>
<td><code>'Cancel'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕文字字串，預設'Cancel'</td>
</tr><tr>
<td><code>editorRenameCancelBtnTextColor</code></td>
<td>String</td>
<td><code>'grey darken-3'</code></td>
<td>No</td>
<td>輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'</td>
</tr><tr>
<td><code>editorRenameCancelBtnTextColorHover</code></td>
<td>String</td>