下拉类型多选组件Vue-Treeselect（键名转换）

最新推荐文章于 2024-09-10 09:33:19 发布

addU

最新推荐文章于 2024-09-10 09:33:19 发布

阅读量1.9k

点赞数

分类专栏： vue组件管理系统文章标签： vue js

本文链接：https://blog.csdn.net/flyingLF/article/details/106273180

版权

vue组件同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

管理系统

2 篇文章 1 订阅

订阅专栏

支持的功能项：

		1.支持嵌套选项的单选和多选
		2.模糊匹配
		3.异步搜索
		4.延迟加载（仅在需要时加载深度选项的数据）
		5.键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
		6.丰富的选项和高度可定制的
		7.支持 多种浏览器

它支持在vue项目中通过npm安装vue-treeselect：npm install --save @riophae/vue-treeselect
在一般项目中也可以使用，前提是保证在vue作为依赖项，

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/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 the 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>

（上述代码段来自原开发文档）

页面截图：
在这里插入图片描述
这里主要记录一下它的自定义键名，

<treeselect
  :options="options"
  :value="value"
  :normalizer="normalizer" /*改变这个参数的对应简明即可*/
  />

export default {
  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) { //方法
      return {
        id: node.key, // 键名转换，方法默认是label和children进行树状渲染
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}
自定义选项标签