碼上快樂

相關內容    簡體    繁體

Vue Treeselect下拉樹實現，選擇部門下拉樹，下拉樹菜單

本文轉載自   查看原文   2020-08-03 19:27   2359    js...

介紹

vue-treeselect是一個多選組件，具有對Vue.js的嵌套選項支持。

  • 具有嵌套選項支持的單個和多個選擇
  • 模糊匹配
  • 異步搜索
  • 延遲加載（僅在需要時加載深層選項的數據）
  • 鍵盤支持（使用Arrow Up＆Arrow Down鍵導航，使用鍵選擇選項Enter等）
  • 豐富的選項和高度可定制
  • 支持各種瀏覽器

需要Vue 2.2+

入門

建議通過npm安裝vue-treeselect，並使用像webpack這樣的捆綁器構建你的應用程序。

npm install --save @riophae/vue-treeselect

此示例顯示如何將vue-treeselect與Vue SFC集成。

  1.  
    <!-- Vue SFC -->
  2.  
    <template>
  3.  
    <div id="app">
  4.  
    <treeselect v-model="value" :multiple="true" :options="options" />
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    // import the component
  10.  
    import Treeselect from '@riophae/vue-treeselect'
  11.  
    // import the styles
  12.  
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  13.  
     
  14.  
    export default {
  15.  
    // register the component
  16.  
    components: { Treeselect },
  17.  
    data() {
  18.  
    return {
  19.  
    // define default value
  20.  
    value: null,
  21.  
    // define options
  22.  
    options: [ {
  23.  
    id: 'a',
  24.  
    label: 'a',
  25.  
    children: [ {
  26.  
    id: 'aa',
  27.  
    label: 'aa',
  28.  
    }, {
  29.  
    id: 'ab',
  30.  
    label: 'ab',
  31.  
    } ],
  32.  
    }, {
  33.  
    id: 'b',
  34.  
    label: 'b',
  35.  
    }, {
  36.  
    id: 'c',
  37.  
    label: 'c',
  38.  
    } ],
  39.  
    }
  40.  
    },
  41.  
    }
  42.  
    </script>

如果您只是不想使用webpack或其他捆綁包，您還可以在頁面中簡單地包含獨立的UMD版本。這樣，確保在vue-treeselect之前包含Vue作為依賴項。

  1.  
     
  2.  
    <html>
  3.  
    <head>
  4.  
    <!-- include Vue 2.x -->
  5.  
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
  6.  
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
  7.  
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.js"></script>
  8.  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.css">
  9.  
    </head>
  10.  
    <body>
  11.  
    <div id="app">
  12.  
    <treeselect v-model="value" :multiple="true" :options="options" />
  13.  
    </div>
  14.  
    </body>
  15.  
    <script>
  16.  
    // register the component
  17.  
    Vue.component('treeselect', VueTreeselect.Treeselect)
  18.  
     
  19.  
    new Vue({
  20.  
    el: '#app',
  21.  
    data: {
  22.  
    // define default value
  23.  
    value: null,
  24.  
    // define options
  25.  
    options: [ {
  26.  
    id: 'a',
  27.  
    label: 'a',
  28.  
    children: [ {
  29.  
    id: 'aa',
  30.  
    label: 'aa',
  31.  
    }, {
  32.  
    id: 'ab',
  33.  
    label: 'ab',
  34.  
    } ],
  35.  
    }, {
  36.  
    id: 'b',
  37.  
    label: 'b',
  38.  
    }, {
  39.  
    id: 'c',
  40.  
    label: 'c',
  41.  
    } ],
  42.  
    },
  43.  
    })
  44.  
    </script>
  45.  
    </html>
  46.  
     

指南

基本功能

此示例演示了vue-treeselect最常用的功能。通過鍵入幾個字母來嘗試模糊匹配功能。

HTML代碼:

  1.  
    <div>
  2.  
    <treeselect
  3.  
    :multiple="true"
  4.  
    :options="options"
  5.  
    placeholder="Select your favourite(s)..."
  6.  
    v-model="value"
  7.  
    />
  8.  
    <pre class="result">{{ value }}</pre>
  9.  
    </div>

JAVASCRIPT代碼：

  1.  
    export default {
  2.  
    data: () => ({
  3.  
    value: [],
  4.  
    options: [ {
  5.  
    id: 'fruits',
  6.  
    label: 'Fruits',
  7.  
    children: [ {
  8.  
    id: 'apple',
  9.  
    label: 'Apple ?',
  10.  
    isNew: true,
  11.  
    }, {
  12.  
    id: 'grapes',
  13.  
    label: 'Grapes ?',
  14.  
    }, {
  15.  
    id: 'pear',
  16.  
    label: 'Pear ?',
  17.  
    }, {
  18.  
    id: 'strawberry',
  19.  
    label: 'Strawberry ?',
  20.  
    }, {
  21.  
    id: 'watermelon',
  22.  
    label: 'Watermelon ?',
  23.  
    } ],
  24.  
    }, {
  25.  
    id: 'vegetables',
  26.  
    label: 'Vegetables',
  27.  
    children: [ {
  28.  
    id: 'corn',
  29.  
    label: 'Corn ?',
  30.  
    }, {
  31.  
    id: 'carrot',
  32.  
    label: 'Carrot ?',
  33.  
    }, {
  34.  
    id: 'eggplant',
  35.  
    label: 'Eggplant ?',
  36.  
    }, {
  37.  
    id: 'tomato',
  38.  
    label: 'Tomato ?',
  39.  
    } ],
  40.  
    } ],
  41.  
    }),
  42.  
    }

 

您需要學習的第一件事是如何定義選項。有兩種選擇：a。可折疊且可能有子選項的文件夾選項，以及b。正常選項不是和不是。在這里，我想借用計算機科學的基本概念，將前者稱為分支節點，將后者稱為葉節點。這兩種節點一起組成樹。

定義葉節點非常簡單：

  1.  
    {
  2.  
    id: '<id>', // used to identify the option within the tree so it's value must be unique across all options
  3.  
    label: '<label>', // used to display the option
  4.  
    }

定義分支節點只需要一個額外的children屬性：

  1.  
    {
  2.  
    id: '<id>',
  3.  
    label: '<label>',
  4.  
    children: [
  5.  
    {
  6.  
    id: '<child id>',
  7.  
    label: '<child label>',
  8.  
    },
  9.  
    ...
  10.  
    ],
  11.  
    }

然后你可以傳遞這些節點的數組作為options道具。請注意，即使您為children屬性分配一個空數組，它仍然被認為是一個分支節點。這可能與您從計算機科學中學到的不同，在計算機科學中，沒有子節點的節點通常稱為葉節點。

有關node對象中所有可用屬性的信息，請參閱下文。

更多功能

這表明了更多功能。

HTML代碼:

  1.  
    <div>
  2.  
    <treeselect
  3.  
    name="demo"
  4.  
    :multiple="multiple"
  5.  
    :clearable="clearable"
  6.  
    :searchable="searchable"
  7.  
    :disabled="disabled"
  8.  
    :open-on-click="openOnClick"
  9.  
    :open-on-focus="openOnFocus"
  10.  
    :clear-on-select="clearOnSelect"
  11.  
    :close-on-select="closeOnSelect"
  12.  
    :always-open="alwaysOpen"
  13.  
    :append-to-body="appendToBody"
  14.  
    :options="options"
  15.  
    :limit="3"
  16.  
    :max-height="200"
  17.  
    v-model="value"
  18.  
    />
  19.  
    <pre class="result">{{ value }}</pre>
  20.  
    <p>
  21.  
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
  22.  
    <label><input type="checkbox" v-model="clearable">Clearable</label>
  23.  
    <label><input type="checkbox" v-model="searchable">Searchable</label>
  24.  
    <label><input type="checkbox" v-model="disabled">Disabled</label>
  25.  
    </p>
  26.  
    <p>
  27.  
    <label><input type="checkbox" v-model="openOnClick">Open on click</label>
  28.  
    <label><input type="checkbox" v-model="openOnFocus">Open on focus</label>
  29.  
    </p>
  30.  
    <p>
  31.  
    <label><input type="checkbox" v-model="clearOnSelect">Clear on select</label>
  32.  
    <label><input type="checkbox" v-model="closeOnSelect">Close on select</label>
  33.  
    </p>
  34.  
    <p>
  35.  
    <label><input type="checkbox" v-model="alwaysOpen">Always open</label>
  36.  
    <label><input type="checkbox" v-model="appendToBody">Append to body</label>
  37.  
    </p>
  38.  
    </div>

JAVASCRIPT代碼：

  1.  
    import { generateOptions } from './utils'
  2.  
     
  3.  
    export default {
  4.  
    data: () => ({
  5.  
    multiple: true,
  6.  
    clearable: true,
  7.  
    searchable: true,
  8.  
    disabled: false,
  9.  
    openOnClick: true,
  10.  
    openOnFocus: false,
  11.  
    clearOnSelect: true,
  12.  
    closeOnSelect: false,
  13.  
    alwaysOpen: false,
  14.  
    appendToBody: false,
  15.  
    value: [ 'a' ],
  16.  
    options: generateOptions(2, 3),
  17.  
    } ),
  18.  
     
  19.  
    watch: {
  20.  
    multiple(newValue) {
  21.  
    if (newValue) {
  22.  
    this.value = this.value ? [ this.value ] : []
  23.  
    } else {
  24.  
    this.value = this.value[0]
  25.  
    }
  26.  
    },
  27.  
    },
  28.  
    }

延遲加載

如果您有大量深層嵌套選項，則可能需要在初始加載時僅加載最高級別的選項，並僅在需要時加載其余選項。您可以通過以下步驟實現這一目標：

  1. 通過設置聲明一個卸載的分支節點children: null
  2. 添加loadOptions道具
  3. 每當卸載的分支節點被擴展時，loadOptions({ action, parentNode, callback, instanceId })將被調用，然后您可以執行從遠程服務器請求數據的作業

HTML代碼：

  1.  
    <treeselect
  2.  
    :multiple="true"
  3.  
    :options="options"
  4.  
    :load-options="loadOptions"
  5.  
    placeholder= "Try expanding any folder option..."
  6.  
    v-model= "value"
  7.  
    />

JAVASCRIPT代碼：

  1.  
    import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  2.  
     
  3.  
    // We just use `setTimeout()` here to simulate an async operation
  4.  
    // instead of requesting a real API server for demo purpose.
  5.  
    const simulateAsyncOperation = fn => {
  6.  
    setTimeout(fn, 2000)
  7.  
    }
  8.  
     
  9.  
    export default {
  10.  
    data: () => ({
  11.  
    value: null,
  12.  
    options: [ {
  13.  
    id: 'success',
  14.  
    label: 'With children',
  15.  
    // Declare an unloaded branch node.
  16.  
    children: null,
  17.  
    }, {
  18.  
    id: 'no-children',
  19.  
    label: 'With no children',
  20.  
    children: null,
  21.  
    }, {
  22.  
    id: 'failure',
  23.  
    label: 'Demonstrates error handling',
  24.  
    children: null,
  25.  
    } ],
  26.  
    }),
  27.  
     
  28.  
    methods: {
  29.  
    loadOptions({ action, parentNode, callback }) {
  30.  
    // Typically, do the AJAX stuff here.
  31.  
    // Once the server has responded,
  32.  
    // assign children options to the parent node & call the callback.
  33.  
     
  34.  
    if (action === LOAD_CHILDREN_OPTIONS) {
  35.  
    switch (parentNode.id) {
  36.  
    case 'success': {
  37.  
    simulateAsyncOperation( () => {
  38.  
    parentNode.children = [ {
  39.  
    id: 'child',
  40.  
    label: 'Child option',
  41.  
    } ]
  42.  
    callback()
  43.  
    })
  44.  
    break
  45.  
    }
  46.  
    case 'no-children': {
  47.  
    simulateAsyncOperation( () => {
  48.  
    parentNode.children = []
  49.  
    callback()
  50.  
    })
  51.  
    break
  52.  
    }
  53.  
    case 'failure': {
  54.  
    simulateAsyncOperation( () => {
  55.  
    callback( new Error('Failed to load options: network error.'))
  56.  
    })
  57.  
    break
  58.  
    }
  59.  
    default: /* empty */
  60.  
    }
  61.  
    }
  62.  
    },
  63.  
    },
  64.  
    }

也可以將根級別選項加載延遲。如果最初沒有注冊選項（options: null），則vue-treeselect將嘗試loadOptions({ action, callback, instanceId })在安裝組件后通過調用加載根選項。在此示例中，我通過設置禁用了自動加載功能autoLoadRootOptions: false，並且在打開菜單時將加載根選項。

HTML代碼：

  1.  
    <treeselect
  2.  
    :load-options="loadOptions"
  3.  
    :options="options"
  4.  
    :auto-load-root-options="false"
  5.  
    :multiple="true"
  6.  
    placeholder= "Open the menu..."
  7.  
    />

JAVASCRIPT代碼：

  1.  
    import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
  2.  
     
  3.  
    const sleep = d => new Promise(r => setTimeout(r, d))
  4.  
    let called = false
  5.  
     
  6.  
    export default {
  7.  
    data: () => ({
  8.  
    options: null,
  9.  
    }),
  10.  
     
  11.  
    methods: {
  12.  
    // You can either use callback or return a Promise.
  13.  
    async loadOptions({ action/*, callback*/ }) {
  14.  
    if (action === LOAD_ROOT_OPTIONS) {
  15.  
    if (!called) {
  16.  
    // First try: simulate an exception.
  17.  
    await sleep(2000) // Simulate an async operation.
  18.  
    called = true
  19.  
    throw new Error('Failed to load options: test.')
  20.  
    } else {
  21.  
    // Second try: simulate a successful loading.
  22.  
    await sleep(2000)
  23.  
    this.options = [ 'a', 'b', 'c', 'd', 'e' ].map(id => ({
  24.  
    id,
  25.  
    label: `option-${id}`,
  26.  
    }))
  27.  
    }
  28.  
    }
  29.  
    },
  30.  
    },
  31.  
    }

 

異步搜索

vue-treeselect支持在用戶輸入時動態加載和更改整個選項列表。默認情況下，vue-treeselect將緩存每個AJAX請求的結果，因此用戶可以等待更少。

HTML代碼：

  1.  
    <treeselect
  2.  
    :multiple="true"
  3.  
    :async="true"
  4.  
    :load-options="loadOptions"
  5.  
    />

JAVASCRIPT代碼：

  1.  
    import { ASYNC_SEARCH } from '@riophae/vue-treeselect'
  2.  
     
  3.  
    const simulateAsyncOperation = fn => {
  4.  
    setTimeout(fn, 2000)
  5.  
    }
  6.  
     
  7.  
    export default {
  8.  
    methods: {
  9.  
    loadOptions({ action, searchQuery, callback }) {
  10.  
    if (action === ASYNC_SEARCH) {
  11.  
    simulateAsyncOperation( () => {
  12.  
    const options = [ 1, 2, 3, 4, 5 ].map(i => ({
  13.  
    id: `${searchQuery}-${i}`,
  14.  
    label: `${searchQuery}-${i}`,
  15.  
    }))
  16.  
    callback( null, options)
  17.  
    })
  18.  
    }
  19.  
    },
  20.  
    },
  21.  
    }

 

平面模式和排序值

在前面的所有示例中，我們使用了vue-treeselect的默認非平面模式，這意味着：

  1. 每當檢查分支節點時，也會檢查其所有子節點
  2. 每當分支節點檢查所有子節點時，也將檢查分支節點本身

有時我們不需要該機制，並且希望分支節點和葉節點不會相互影響。在這種情況下，應使用平面模式，如下所示。

如果要控制顯示所選選項的順序，請使用sortValueByprop。這個道具有三個選擇：

  • "ORDER_SELECTED" （默認） - 已選擇訂單
  • "LEVEL" - 選項等級：C?BB?AAA
  • "INDEX" - 期權指數：AAA?BB?C

HTML代碼：

  1.  
    <div>
  2.  
    <treeselect
  3.  
    :multiple="true"
  4.  
    :options="options"
  5.  
    :flat="true"
  6.  
    :sort-value-by="sortValueBy"
  7.  
    :default-expand-level="1"
  8.  
    placeholder="Try selecting some options."
  9.  
    v-model="value"
  10.  
    />
  11.  
    <pre class="result">{{ value }}</pre>
  12.  
    <p><strong>Sort value by:</strong></p>
  13.  
    <p class="options">
  14.  
    <label><input type="radio" value="ORDER_SELECTED" v-model="sortValueBy">Order selected</label>
  15.  
    <label><input type="radio" value="LEVEL" v-model="sortValueBy">Level</label>
  16.  
    <label><input type="radio" value="INDEX" v-model="sortValueBy">Index</label>
  17.  
    </p>
  18.  
    </div>

JAVASCRIPT代碼：

  1.  
    import { generateOptions } from './utils'
  2.  
     
  3.  
    export default {
  4.  
    data() {
  5.  
    return {
  6.  
    value: [ 'c', 'aaa', 'bb' ],
  7.  
    options: generateOptions( 3),
  8.  
    sortValueBy: 'ORDER_SELECTED',
  9.  
    }
  10.  
    },
  11.  
    }

防止價值組合

對於非平面和多選模式，如果檢查了分支節點及其所有后代，則vue-treeselect將它們組合到值數組中的單個項目中，如以下示例所示。通過使用valueConsistsOfprop，您可以更改該行為。這個道具有四個選擇：

  • "ALL"- 任何已檢查的節點都將包含在value數組中
  • "BRANCH_PRIORITY"（默認） - 如果選中了分支節點，則將在value數組中排除其所有后代
  • "LEAF_PRIORITY"- 如果選中了一個分支節點，該節點本身及其分支后代將從value數組中排除，但它的葉子后代將被包含在內
  • "ALL_WITH_INDETERMINATE"- 任何已檢查的節點都將包含在value陣列中，加上不確定的節點

HTML代碼：

  1.  
    <div>
  2.  
    <treeselect
  3.  
    :multiple="true"
  4.  
    :options="options"
  5.  
    :value-consists-of="valueConsistsOf"
  6.  
    v-model="value"
  7.  
    />
  8.  
    <pre class="result">{{ value }}</pre>
  9.  
    <p><strong>Value consists of:</strong></p>
  10.  
    <p class="options">
  11.  
    <label><input type="radio" value="ALL" v-model="valueConsistsOf">All</label><br>
  12.  
    <label><input type="radio" value="BRANCH_PRIORITY" v-model="valueConsistsOf">Branch priority</label><br>
  13.  
    <label><input type="radio" value="LEAF_PRIORITY" v-model="valueConsistsOf">Leaf priority</label><br>
  14.  
    <label><input type="radio" value="ALL_WITH_INDETERMINATE" v-model="valueConsistsOf">All with indeterminate</label>
  15.  
    </p>
  16.  
    </div>

JAVASCRIPT代碼：  

  1.  
    export default {
  2.  
    data: () => ({
  3.  
    value: [ 'team-i' ],
  4.  
    valueConsistsOf: 'BRANCH_PRIORITY',
  5.  
    options: [ {
  6.  
    id: 'company',
  7.  
    label: 'Company ?',
  8.  
    children: [ {
  9.  
    id: 'team-i',
  10.  
    label: 'Team I ?',
  11.  
    children: [ {
  12.  
    id: 'person-a',
  13.  
    label: 'Person A ?',
  14.  
    }, {
  15.  
    id: 'person-b',
  16.  
    label: 'Person B ?',
  17.  
    } ],
  18.  
    }, {
  19.  
    id: 'team-ii',
  20.  
    label: 'Team II ?',
  21.  
    children: [ {
  22.  
    id: 'person-c',
  23.  
    label: 'Person C ?',
  24.  
    }, {
  25.  
    id: 'person-d',
  26.  
    label: 'Person D ?',
  27.  
    } ],
  28.  
    }, {
  29.  
    id: 'person-e',
  30.  
    label: 'Person E ?',
  31.  
    } ],
  32.  
    } ],
  33.  
    }),
  34.  
    }

您可以通過設置isDisabled: true任何葉節點或分支節點來禁用項目選擇。對於非平面模式，在分支節點上設置也將禁用其所有后代。

HTML代碼：

  1.  
    <treeselect
  2.  
    :multiple="true"
  3.  
    :options="options"
  4.  
    :value="value"
  5.  
    />

JAVASCRIPT代碼：

  1.  
    export default {
  2.  
    data: () => ({
  3.  
    options: [ {
  4.  
    id: 'folder',
  5.  
    label: 'Normal Folder',
  6.  
    children: [ {
  7.  
    id: 'disabled-checked',
  8.  
    label: 'Checked',
  9.  
    isDisabled: true,
  10.  
    }, {
  11.  
    id: 'disabled-unchecked',
  12.  
    label: 'Unchecked',
  13.  
    isDisabled: true,
  14.  
    }, {
  15.  
    id: 'item-1',
  16.  
    label: 'Item',
  17.  
    } ],
  18.  
    }, {
  19.  
    id: 'disabled-folder',
  20.  
    label: 'Disabled Folder',
  21.  
    isDisabled: true,
  22.  
    children: [ {
  23.  
    id: 'item-2',
  24.  
    label: 'Item',
  25.  
    }, {
  26.  
    id: 'item-3',
  27.  
    label: 'Item',
  28.  
    } ],
  29.  
    } ],
  30.  
    value: [ 'disabled-checked' ],
  31.  
    }),
  32.  
    }

有時我們需要在特定分支內搜索選項的可能性。例如，你的分店是不同的餐館，葉子是他們訂購的食物。要搜索“McDonals”餐廳的沙拉訂單，只需搜索“mc salad”。您也可以嘗試搜索“沙拉”來感受差異。

具體來說，您的搜索查詢會在空格上分割。如果在節點的路徑中找到每個分割的字符串，那么我們匹配。

HTML代碼：

  1.  
    <treeselect
  2.  
    :multiple="true"
  3.  
    :options="options"
  4.  
    :disable-branch-nodes="true"
  5.  
    v-model= "value"
  6.  
    search-nested
  7.  
    />

JAVASCRIPT代碼：

  1.  
    export default {
  2.  
    data: () => ({
  3.  
    value: null,
  4.  
    options: [ {
  5.  
    key: 'a',
  6.  
    name: 'a',
  7.  
    subOptions: [ {
  8.  
    key: 'aa',
  9.  
    name: 'aa',
  10.  
    } ],
  11.  
    } ],
  12.  
    normalizer(node) {
  13.  
    return {
  14.  
    id: node.key,
  15.  
    label: node.name,
  16.  
    children: node.subOptions,
  17.  
    }
  18.  
    },
  19.  
    }),
  20.  
    }

自定義選項標簽

您可以自定義每個選項的標簽。vue-treeselect利用了Vue的作用域插槽功能，並提供了一些你應該在自定義模板中使用的道具：

  • node- 一個規范化的節點對象（請注意，這與您從normalizer()prop 返回的內容不同）
  • count＆shouldShowCount- 計數和布爾值表示是否應顯示計數
  • labelClassName＆countClassName- 使樣式正確的CSS類名

HTML代碼：

  1.  
    <treeselect
  2.  
    :options="options"
  3.  
    :value="value"
  4.  
    :searchable="false"
  5.  
    :show-count="true"
  6.  
    :default-expand-level="1"
  7.  
    >
  8.  
    <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
  9.  
    {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }}
  10.  
    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
  11.  
    </label>
  12.  
    </treeselect>

JAVASCRIPT代碼：

  1.  
    import { generateOptions } from './utils'
  2.  
     
  3.  
    export default {
  4.  
    data: () => ({
  5.  
    value: null,
  6.  
    options: generateOptions( 2),
  7.  
    }),
  8.  
    }

自定義值標簽

您可以自定義有價物品的標簽（多項選擇時的每個項目）。vue-treeselect利用了Vue的作用域插槽功能，並提供了一些你應該在自定義模板中使用的道具：

  • node- 一個規范化的節點對象（請注意，這與您從normalizer()prop 返回的內容不同）

HTML代碼：

  1.  
    <div>
  2.  
    <treeselect :options="options" :value="value" :multiple="multiple">
  3.  
    <div slot="value-label" slot-scope="{ node }">{{ node.raw.customLabel }}</div>
  4.  
    </treeselect>
  5.  
    <p>
  6.  
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
  7.  
    </p>
  8.  
    </div>

JAVASCRIPT代碼：

  1.  
    export default {
  2.  
    data: () => ({
  3.  
    multiple: true,
  4.  
    value: null,
  5.  
    options: [ 1, 2, 3 ].map(i => ({
  6.  
    id: i,
  7.  
    label: `Label ${i}`,
  8.  
    customLabel: `Custom Label ${i}`,
  9.  
    } )),
  10.  
    } ),
  11.  
    }

Vuex支持

在前面的所有示例中，我們用於v-model在應用程序狀態和vue-treeselect之間同步值，也稱為雙向數據綁定。如果你正在使用Vuex，我們可以使用:value和@input，因為v-model它只是Vue 2中的語法糖。

具體而言，我們可以綁定getter到:value使VUE-treeselect反映您Vuex狀態的任何變化，並結合action或mutation以@input更新您的Vuex狀態每當值改變。

HTML代碼：

  1.  
    <div>
  2.  
    <treeselect
  3.  
    :options="options"
  4.  
    :value="value"
  5.  
    :searchable="false"
  6.  
    @ input="updateValue"
  7.  
    />
  8.  
    <pre class="result">{{ value }}</pre>
  9.  
    </div>

JAVASCRIPT代碼：

  1.  
    import Vue from 'vue'
  2.  
    import Vuex, { mapState, mapMutations } from 'vuex'
  3.  
    import { generateOptions } from './utils'
  4.  
     
  5.  
    Vue.use(Vuex)
  6.  
     
  7.  
    const store = new Vuex.Store({
  8.  
    state: {
  9.  
    value: 'a',
  10.  
    },
  11.  
    mutations: {
  12.  
    updateValue(state, value) {
  13.  
    state.value = value
  14.  
    },
  15.  
    },
  16.  
    })
  17.  
     
  18.  
    export default {
  19.  
    store,
  20.  
     
  21.  
    data: () => ({
  22.  
    options: generateOptions( 2),
  23.  
    }),
  24.  
     
  25.  
    computed: {
  26.  
    ...mapState([ 'value' ]),
  27.  
    },
  28.  
     
  29.  
    methods: {
  30.  
    ...mapMutations([ 'updateValue' ]),
  31.  
    },
  32.  
    }

API

節點

node對象的可用屬性。

鍵 類型 描述
id（必填） 號碼| 串 用於標識樹中的選項。它的價值必須在所有選項中都是唯一的。
標簽（必填） 串 用於顯示選項。
孩子 node[] | null 聲明一個分支節點。您可以：
1）設置為由a組成的子選項數組。葉節點，b。分支節點，或c。這兩者的混合物。或者
2）設置為空數組，沒有子選項。或者
3）設置為null聲明一個卸載的分支節點以進行延遲加載。您可以稍后重新分配一個數組（無論它是否為空）loadOptions()來注冊這些子選項，並將此分支節點標記為已加載。
如果要聲明葉節點，請設置children: undefined或只是省略此屬性。
被禁用 布爾 用於禁用項目選擇。有關詳細信息，請參見此處
是新的 布爾 用於為新節點提供不同的顏色。
isDefaultExpanded 布爾 是否應默認擴展此文件夾選項。

的值label，children或isDisabled可以隨時重新分配。

添加比列出的屬性更多的屬性是可以的。您甚至可以通過訪問在自定義模板中使用這些額外的屬性node.raw.xxx。

道具

名稱 輸入/默認 描述
allowClearingDisabled 類型：布爾
值默認值：false		 即使存在禁用的選定節點，是否允許重置值。
allowSelectingDisabledDescendants 類型：布爾
值默認值：false		 選擇/取消選擇祖先節點時，是否應選擇/取消選擇其禁用的后代。您可能希望將此與allowClearingDisabledprop 結合使用。
alwaysOpen 類型：布爾
值默認值：false		 菜單是否應始終打開。
appendToBody 類型：布爾
值默認值：false		 將菜單附加到<body />。
異步 類型：布爾
值默認值：false		 是否啟用異步搜索模式。
自動對焦 類型：布爾
值默認值：false		 自動將組件聚焦在mount上。
autoLoadRootOptions 類型：布爾
值默認值：true		 在mount上自動加載root選項。設置false為時，將在打開菜單時加載根選項。
autoDeselectAncestors 類型：布爾
值默認值：false		 當用戶取消選擇節點時，會自動取消選擇其祖先。僅適用於平面模式。
autoDeselectDescendants 類型：布爾
值默認值：false		 當用戶取消選擇節點時，會自動取消選擇其后代。僅適用於平面模式。
autoSelectAncestors 類型：布爾
值默認值：false		 當用戶選擇節點時，自動選擇其祖先。僅適用於平面模式。
autoSelectDescendants 類型：布爾
值默認值：false		 當用戶選擇節點時，自動選擇其后代。僅適用於平面模式。
backspaceRemoves 類型：布爾
值默認值：true		 Backspace如果沒有文本輸入，是否刪除最后一項。
beforeClearAll 類型：Fn（）?（布爾| Promise <布爾>）
默認值：() => true		 在清除所有輸入字段之前處理的函數。返回false到被清除的停止值。
branchNodesFirst 類型：布爾
值默認值：false		 在葉節點之前顯示分支節點。
cacheOptions 類型：布爾
值默認值：true		 是否為異步搜索模式緩存每個搜索請求的結果。
可清除 類型：布爾
值默認值：true		 是否顯示重置值的“×”按鈕。
clearAllText 類型：字符串
默認值："Clear all"		 標題為“×”按鈕時:multiple="true"。
clearOnSelect 類型：Boolean 
默認值：默認為falsewhen :multiple="true"; 總是true否則。		 選擇選項后是否清除搜索輸入。僅在使用時使用:multiple="true"。對於單選模式，無論prop值如何，它總是在選擇后清除輸入。
clearValueText 類型：字符串
默認值："Clear value"		 “×”按鈕的標題。
closeOnSelect 類型：布爾
值默認值：true		 選擇選項后是否關閉菜單。僅在使用時使用:multiple="true"。
defaultExpandLevel 類型：數字
默認值：0		 加載時應自動擴展多少級別的分支節點。設置Infinity為默認情況下展開所有分支節點。
defaultOptions 類型：布爾值| node[]
默認：false		 用戶開始搜索之前顯示的默認選項集。用於異步搜索模式。設置true為時，搜索查詢作為空字符串的結果將自動加載。
deleteRemoves 類型：布爾
值默認值：true		 Delete如果沒有文本輸入，是否刪除最后一項。
分隔符 類型：字符串
默認值：","		 用於連接隱藏字段值的多個值的分隔符。
disableBranchNodes 類型：布爾
值默認值：false		 是否阻止選擇分支節點。見這里的例子。
殘 類型：布爾
值默認值：false		 是否禁用控件。
disableFuzzyMatching 類型：布爾
值默認值：false		 設置為true禁用模糊匹配功能，默認情況下啟用此功能。
平面 類型：布爾
值默認值：false		 是否啟用平面模式。有關詳細信息，請參見此處
實例Id 類型：字符串| 號碼
默認值："<auto-incrementing number>$$"		 將作為最后一個參數傳遞所有事件。用於識別事件來源。
joinValues 類型：布爾
值默認值：false		 使用delimiter（傳統模式）將多個值連接到單個表單字段中。
限制 類型：數字
默認值：Infinity		 限制所選選項的顯示。其余的將隱藏在limitText字符串中。
limitText 類型：Fn（count）?字符串
默認值：count => `and ${count} more`		 處理所選元素超出定義限制時顯示的消息的函數。
裝載 類型：布爾
值默認值：false		 是否是外部加載選項。設置true為顯示微調器。
loadingText 類型：字符串
默認值："Loading..."		 加載選項時顯示的文本。
loadOptions 類型：FN（{ action，callback，parentNode?，instanceId}）?（void|服務承諾）
默認值：-		 用於動態加載選項。有關詳細信息，請參見此處 
可能的值action："LOAD_ROOT_OPTIONS"，"LOAD_CHILDREN_OPTIONS"或"ASYNC_SEARCH"。
callback- 一個接受可選error參數的函數
parentNode- 僅在加載子選項時顯示
searchQuery- 僅在搜索異步選項時顯示
instanceId- instanceIdeqauls為傳遞給vue-treeselect 的prop 的值
matchKeys 類型：String [] 
默認值：[ "label" ]		 node要過濾的對象的哪些鍵。
最大高度 類型：數字
默認值：300		 設置maxHeight菜單的樣式值。
多 類型：布爾
值默認值：false		 設置true為允許選擇多個選項（也稱為多選模式）。
名稱 類型：字符串
默認值：-		 <input />為html表單生成帶有此字段名稱的隱藏標記。
noChildrenText 類型：字符串
默認值："No sub-options."		 分支節點沒有子節點時顯示的文本。
noOptionsText 類型：字符串
默認值："No options available."		 沒有可用選項時顯示的文本。
noResultsText 類型：字符串
默認值："No results found..."		 沒有匹配的搜索結果時顯示的文本。
正規化 類型：Fn（node，instanceId）? node
默認值：node => node		 用於規范化源數據。有關詳細信息，請參見此處
openDirection 類型：字符串
默認值："auto"		 默認情況下（"auto"），菜單將在控件下方打開。如果空間不足，vue-treeselect將自動翻轉菜單。您可以使用其他四個選項之一強制菜單始終打開到指定的方向。
可接受的值："auto"，"below"，"bottom"，"above"或"top"。
openOnClick 類型：布爾
值默認值：true		 是否在單擊控件時自動打開菜單。
openOnFocus 類型：布爾
值默認值：false		 是否在控件聚焦時自動打開菜單。
選項 類型：默認：-node[] 一系列可用選項。請參閱此處以了解如何定義它們。
占位符 類型：字符串
默認值："Select..."		 字段占位符，在沒有值時顯示。
需要 類型：布爾
值默認值：false		 required需要時應用HTML5 屬性。
retryText 類型：字符串
默認值："Retry?"		 顯示的文本詢問用戶是否重試加載子選項。
retryTitle 類型：字符串
默認值："Click to retry"		 重試按鈕的標題。
搜索 類型：布爾
值默認值：true		 是否啟用搜索功能。
searchNested 類型：布爾
值默認值：false		 設置true是否搜索查詢也應搜索所有祖先節點。見這里的例子。
searchPromptText 類型：字符串
默認值："Type to search..."		 文本提示以提示異步搜索。用於異步搜索模式。
showCount 類型：布爾
值默認值：false		 是否在每個分支節點的標簽旁邊顯示子項。見這里的例子。
showCountOf 類型：字符串
默認值："ALL_CHILDREN"		 與結合使用showCount以指定應顯示哪種類型的計數。
可接受的值："ALL_CHILDREN"，"ALL_DESCENDANTS"，"LEAF_CHILDREN"或"LEAF_DESCENDANTS"。
showCountOnSearch 類型：布爾
值默認值：-		 是否在搜索時向孩子們展示。回退到showCount未指定時的值。
sortValueBy 類型：字符串
默認值："ORDER_SELECTED"		 選擇的選項應以哪種順序顯示在觸發器中並按value數組排序。僅在使用時使用:multiple="true"。見這里的例子。
可接受的值："ORDER_SELECTED"，"LEVEL"或"INDEX"。
的tabIndex 類型：數字
默認值：0		 控件的Tab索引。
值 輸入：id| node| id[]| node[]
默認值：-		 控件的值。
應當id或node對象何時:multiple="false"，或者數組id或node對象何時:multiple="true"。它的格式取決於valueFormat道具。
對於大多數情況，只需使用v-model。
valueConsistsOf 類型：字符串
默認值："BRANCH_PRIORITY"		 value在多選模式下，陣列中應包含哪種節點。見這里的例子。
可接受的值："ALL"，"BRANCH_PRIORITY"，"LEAF_PRIORITY"或"ALL_WITH_INDETERMINATE"。
valueFormat 類型：字符串
默認值："id"		 value道具的格式。
請注意，設置為時，每個對象中"object"只需要id＆label屬性。可接受的值：或。nodevalue
"id""object"
用zIndex 類型：數字| String 
默認值：999		 z-index 的菜單。

活動

名稱 屬性 描述
打開 （instanceId） 菜單打開時發出。
關 （value，instanceId） 菜單關閉時發出。
輸入 （value，instanceId） 價值變動后發布。
選擇 （node，instanceId） 選擇選項后發出。
取消 （node，instanceId） 取消選擇選項后發出。
搜索的變化 （searchQuery，instanceId） 搜索查詢更改后發出。

老虎

名稱 道具 描述
選項標簽 { node，shouldShowCount，count，labelClassName，countClassName} 自定義選項標簽模板的插槽。有關詳細信息，請參見此處
值標簽 { node} 自定義價值標簽模板的插槽。有關詳細信息，請參見此處

詳情請參考：https://vue-treeselect.js.org/

 

 

https://blog.csdn.net/dream_xun/article/details/83116804


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue Treeselect下拉樹實現，選擇部門下拉樹，下拉樹菜單 vue-Treeselect實現組織機構（員工）下拉樹的功能 vue+element下拉樹選擇器 Layui tree 下拉菜單樹 iview下拉樹組件 Element-UI 實現下拉樹 element-ui的下拉樹實現 select3搜索下拉樹 treeview bootstrap 多級下拉樹 zTree開發下拉樹
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM