場景

最終實現(xiàn)的效果

?

checkbox-group元素能把多個 checkbox 管理為一組，只需要在 Group 中使用v-model綁定Array類型的變量即可。

el-checkbox 的 label屬性是該 checkbox 對應(yīng)的值，若該標(biāo)簽中無內(nèi)容，則該屬性也充當(dāng) checkbox 按鈕后的介紹。

label與數(shù)組中的元素值相對應(yīng)，如果存在指定的值則為選中狀態(tài)，否則為不選中。

官方示例代碼

<template><el-checkbox-group v-model="checkList"><el-checkbox label="復(fù)選框 A"></el-checkbox><el-checkbox label="復(fù)選框 B"></el-checkbox><el-checkbox label="復(fù)選框 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: ['選中且禁用','復(fù)選框 A']};}};</script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

添加一個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>

怎樣設(shè)置其選項有哪些

通過v-if循環(huán)一個對象數(shù)組dates,label綁定的是這個選項的值，即實際傳遞的值，實際顯示的值通過{{date.label}}來顯示。

對這個對象數(shù)組進行賦值

? data() {return {dates: dateOptions,

這里將其設(shè)置為固定值，可以設(shè)置為請求后臺數(shù)據(jù)并將對象的list賦值給dates,這里是將一個對象數(shù)組常量賦值給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"

來實現(xiàn)，將選中的label所形成的數(shù)組與form表單參數(shù)對象的checkList所綁定。

checkList是一個數(shù)組。

????? form: {id: undefined,gh: undefined,xm: undefined,dabh: undefined,bm: undefined,year: undefined,mouth: undefined,checkList: [],kqzt: undefined,},

這樣在將此form提交到后臺時就能獲取到所選的label組成的數(shù)組。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。