場景

最終實現的效果

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組成的陣列。