1、安装TreeSelect

yarn add @riophae/vue-treeselect

注意这个地方用yarn安装,感觉这个yarn命令对没有任何基础的人也很友好HAHA

很多教程都是用npm install --save 命令来安装的,我的问题是安装完之后,yarn run serve时会提示缺少很多依赖,结合之前写的安装vue时出现的问题,强烈推荐大家使用yarn,安装过程也比npm快很多。(虽然我也不太熟悉npm哈哈)

2、在使用的位置引入

<!-- 1、树形选框组件-->

<treeselect v-model="value" :multiple="true" :options="options" />


<!-- 2、script-->
<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 {
        // 初始值
        value: null,
        // 树形选框的option选项
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>

具体Treeselect功能可以参考链接 https://blog.csdn.net/dream_xun/article/details/83116804 或者官网

Logo

前往低代码交流专区

更多推荐