ElementUI中el-checkbox-group多選框組的使用，怎樣設置一組選項與獲取所選值

場景

最終實現的效果

 

 

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