最近使用到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); //自定義的參數
}
謝謝觀看！