码上快乐

相关内容   简体   繁体

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