場景

最終實現的效果

?

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>export default {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組成的數組。

總結

以上是生活随笔為你收集整理的ElementUIz中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。