每天学习一个vue插件(19)——vue-treeselect

每个人，终究要学会一个人独自长大

前言

1 介绍

常用属性 props

options

:options="options"

options: [{
  id: 'A',
  name: 'a',
  // 默认禁用该项
  isDisabled: true,
  // 默认展开该项叶子节点
  isDefaultExpanded: true,
  children: []
}]

value

v-model="value"

// 默认选中节点
// 以节点 id 填充
// 默认选中 a
value: ['A']

default-expand-level

:default-expand-level="level"

// 默认展开第一层级
// 所以分支下面的第一层级
// 如果希望指定某个分支，请在options里面配置 isDefaultExpanded
level: 1

normalizer

// 自定义键名
:normalizer=“normalizer”

// 函数类型，参数node
// 默认数据格式 id label children
// 只将 label 替换为 name
normalizer(node) {
  return {
    ...node,
    // id: node.key,
    label: node.name
    // children: node.subOptions,
  }
}

multiple

// 支持多选
:multiple=“true”

disableBranchNodes

// 禁止分支节点事件，只允许叶子节点触发
:disable-branch-nodes="true"

showCount

// 显示叶子节点数目
:show-count="true"

flat

// 使用扁平模式
// 同时选中分支和叶子节点
// 默认选中分支后，叶子节点全部被选中
:flat="true"

常用插槽 slot

option-label

// 选项插槽
// 参数 {node，count}
<label
  slot="option-label"
  slot-scope="{node,count}">
  {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }}
  <span>({{ count }})</span>
</label>

常用事件 methods

select

// 选中时触发
// 参数node
@select="select"

deselect

// 取消时触发
// 参数node
@deselect="deselect"

2 使用

安装

npm i @riophae/vue-treeselect --save

引入

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

树状选择

<template>
  <div class="BaseTreeSelect">
    <treeselect
      v-model="value"
      placeholder="请选择"
      :options="options"
      :multiple="true"
      :flat="true"
      :show-count="true"
      :normalizer="normalizer"
      :default-expand-level="1"
      @select="select"
    >
      <label
        slot="option-label"
        slot-scope="{
          node,
          shouldShowCount,
          count,
          labelClassName,
          countClassName
        }"
        :class="labelClassName"
      >
        {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }}
        <span v-if="shouldShowCount" :class="countClassName">
          ({{ count }})
        </span>
      </label>
    </treeselect>
    <p>{{ value }}</p>
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      // 默认选中
      // id集合
      value: ['A', 'ABA', 'bb'],
      // 自定义键名
      // 默认 id label children
      // label 替换为name
      normalizer(node) {
        return {
          ...node,
          // id: node.key,
          label: node.name
          // children: node.subOptions,
        }
      },
      // 树状结构
      options: [
        {
          id: 'A',
          name: 'a',
          children: [
            {
              id: 'AA',
              name: 'aa',
              isDisabled: true
            },
            {
              id: 'AB',
              name: 'ab',
              // 默认展开
              isDefaultExpanded: true,
              children: [
                {
                  id: 'ABA',
                  name: 'aba'
                },
                {
                  id: 'ABB',
                  name: 'abb',
                  isNew: true
                }
              ]
            }
          ]
        },
        {
          id: 'b',
          name: 'b',
          children: [
            {
              id: 'ba',
              name: 'ba'
            },
            {
              id: 'bb',
              name: 'bb'
            }
          ]
        },
        {
          id: 'c',
          name: 'c'
        }
      ]
    }
  },
  methods: {
    select(node) {
      console.log('node=', node)
    }
  }
}
</script>

3.注意

1.value默认选中某些节点
2.isDefaultExpanded默认展开某个分支

尾声

今天的电影特别好看，今天的你也特别好看呢~

晚安 ^_^

参考链接

• vue-treeselect 文档

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas
• 每天学习一个vue插件(14)——vue-pull-to
• 每天学习一个vue插件(15)——vue-content-placeholders
• 每天学习一个vue插件(16)——vue-video-player
• 每天学习一个vue插件(17)——js-file-download
• 每天学习一个vue插件(18)——js-audio-recorder