Vue Treeselect下拉樹實現，選擇部門下拉樹，下拉樹選單
阿新 • • 發佈：2019-01-19
先來看一張最基本的效果圖：
介紹
- 具有巢狀選項支援的單個和多個選擇
- 模糊匹配
- 非同步搜尋
- 延遲載入（僅在需要時載入深層選項的資料）
- 鍵盤支援（使用Arrow Up＆Arrow Down鍵導航，使用鍵選擇選項Enter等）
- 豐富的選項和高度可定製
- 支援各種瀏覽器
需要Vue 2.2+
入門
建議通過npm安裝vue-treeselect，並使用像webpack這樣的捆綁器構建你的應用程式。
npm install --save @riophae/vue-treeselect
此示例顯示如何將vue-treeselect與Vue SFC整合。
<!-- Vue SFC --> 如果您只是不想使用webpack或其他捆綁包，您還可以在頁面中簡單地包含獨立的UMD版本。這樣，確保在vue-treeselect之前包含Vue作為依賴項。
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
// define default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
},
})
</script>
</html>
指南
基本功能
此示例演示了vue-treeselect最常用的功能。通過鍵入幾個字母來嘗試模糊匹配功能。
HTML程式碼:
<div>
<treeselect
:multiple="true"
:options="options"
placeholder="Select your favourite(s)..."
v-model="value"
/>
<pre class="result">{{ value }}</pre>
</div>JAVASCRIPT程式碼：
export default {
data: () => ({
value: [],
options: [ {
id: 'fruits',
label: 'Fruits',
children: [ {
id: 'apple',
label: 'Apple