iview中tree的事件运用

本文详细解析了iView UI框架中Tree组件的事件和方法使用,包括'on-check-change'等事件的绑定与触发,以及如何通过'ref'属性调用组件的方法如'getCheckedNodes'来获取选中的节点。

iview中的事件和方法如下:

技术分享图片

技术分享图片

 

案例说明:

html代码

  <Tree :data="data4" @on-check-change="choiceAll" ref="tree4" show-checkbox multiple></Tree>

-------------------------------------------------------------------------------------------

data(){

  data4: [

  {

    title: ‘parent 1-1‘,

    expand: true,

    children: [

      {

        title: ‘leaf 1-1-1‘,

      },

      {

        title: ‘leaf 1-1-2‘

      }

    ]

  },

  {

    title: ‘parent 1-2‘,

    expand: true,

    children: [

  {

    title: ‘leaf 1-2-1‘,

    checked: true

  },

  {

    title: ‘leaf 1-2-1‘

   }

  ]

  }

]

},

methods:{

  choiceAll:function(data){

    console.log(data);  //当复选框选中时则会打印出选中的内容

    let choicesAll=this.$refs.tree4.getCheckedNodes; //方法的运用 getSelectedNodes也是如此用法

    console.log(choicesAll); 

  }

}

总结:

on-select-change,on-check-change,on-toggle-expand  运用方法是类同而tree方法的运用则需要先添加一个ref  

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值