vue项目使用element ui的Checkbox

最近使用到element ui的下拉多选框Checkbox

Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox

Checkbox的属性和事件如下图:

在框架中的搜索组件中需要获取选中的值,因此使用Checkbox自带的 change 事件

基础使用如下:

页面代码:

<el-checkbox  @change="handleChange">example</el-checkbox>

js代码:

handleChange(event){ 
  console.log(event) //这里输出event为boolean类型的值
},

在无需做数据修改,只需要监听变化的情况下,使用这样的方式即可.

但是,如果有数据修改的需求下,上面的方式根本不满足于需求,因此需要在上面的使用方式的基础上做一下手脚

一般情况下,都是在点击选中时将相应的值以参数形式传递

那么,进阶使用如下:

页面代码:

<el-checkbox  @change="checked=>handleChange(checked,option,option)">example</el-checkbox>
/*哪里不一样,请对比一下上面的代码,()内的checked为change事件自带的参数--boolean类型,选中时为true,取消时为false,第一个参数永远为change自带的参数
在此后则是放进自己需要传递的参数*/

js代码:

handleChange(boolean,val1,val2){
    console.log(boolean); //change事件自带的参数 boolean类型
    console.log(val1); //自定义的参数
    console.log(val2); //自定义的参数
}

谢谢观看！