ant-design-pro of vue 使用treeselect

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 或者官网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值