ElementUIz中el-checkbox-group多選框組的使用,怎樣設定一組選項與獲取所選值
阿新 • • 發佈:2020-08-18
場景
最終實現的效果
checkbox-group元素能把多個 checkbox 管理為一組,只需要在 Group 中使用v-model繫結Array型別的變數即可。
el-checkbox 的 label屬性是該 checkbox 對應的值,若該標籤中無內容,則該屬性也充當 checkbox 按鈕後的介紹。
label與陣列中的元素值相對應,如果存在指定的值則為選中狀態,否則為不選中。
官方示例程式碼
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="複選框 A"></el-checkbox> <el-checkbox label="複選框 B"></el-checkbox> <el-checkbox label="複選框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="選中且禁用" disabled></el-checkbox> </el-checkbox-group> </template> <script> exportdefault { data () { return { checkList: ['選中且禁用','複選框 A'] }; } }; </script>
注:
部落格:
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
新增一個el-check-group
<el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange"> <el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox> </el-checkbox-group>
怎樣設定其選項有哪些
通過v-if迴圈一個物件陣列dates,label繫結的是這個選項的值,即實際傳遞的值,實際顯示的值通過{{date.label}}來顯示。
對這個物件陣列進行賦值
data() { return { dates: dateOptions,
這裡將其設定為固定值,可以設定為請求後臺資料並將物件的list賦值給dates,這裡是將一個物件陣列常量賦值給dates
const dateOptions = [ { key: "d1", label: "1號", }, { key: "d2", label: "2號", }, { key: "d3", label: "3號", }, { key: "d4", label: "4號", }, { key: "d5", label: "5號", }, { key: "d6", label: "6號", }, { key: "d7", label: "7號", }, { key: "d8", label: "8號", }, { key: "d9", label: "9號", }, { key: "d10", label: "10號", }, { key: "d11", label: "11號", }, { key: "d12", label: "12號", }, { key: "d13", label: "13號", }, { key: "d13", label: "13號", }, { key: "d14", label: "14號", }, { key: "d15", label: "15號", }, { key: "d16", label: "16號", }, { key: "d17", label: "17號", }, { key: "d18", label: "18號", }, { key: "d19", label: "19號", }, { key: "d20", label: "20號", }, { key: "d21", label: "21號", }, { key: "d22", label: "22號", }, { key: "d23", label: "23號", }, { key: "d24", label: "24號", }, { key: "d25", label: "25號", }, { key: "d26", label: "26號", }, { key: "d27", label: "27號", }, { key: "d28", label: "28號", }, { key: "d29", label: "29號", }, { key: "d30", label: "30號", }, { key: "d31", label: "31號", }, ];
然後怎樣獲取勾選中的值,通過
v-model="form.checkList"
來實現,將選中的label所形成的陣列與form表單引數物件的checkList所繫結。
checkList是一個數組。
form: {
id: undefined,
gh: undefined,
xm: undefined,
dabh: undefined,
bm: undefined,
year: undefined,
mouth: undefined,
checkList: [],
kqzt: undefined,
},
這樣在將此form提交到後臺時就能獲取到所選的label組成的陣列。