最近使用到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); //自定义的参数
}
谢谢观看！