The use of el-checkbox-group multi-select box group in ElementUI, how to set a group of options and get the selected value

Scenes

final effect

 

 

The checkbox-group element can manage multiple checkboxes into a group, just use v-model in Group to bind variables of type Array.

The label attribute of el-checkbox is the value corresponding to the checkbox. If there is no content in the label, this attribute also acts as an introduction after the checkbox button.

The label corresponds to the element value in the array. If the specified value exists, it is selected, otherwise it is not selected.

Official sample code

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="checkbox A"></el-checkbox>
    <el-checkbox label="checkbox B"></el-checkbox>
    <el-checkbox label="checkbox C"></el-checkbox>
    <el-checkbox label="disabled" disabled></el-checkbox>
    <el-checkbox label="checked and disabled" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['checked and disabled','checkbox A']
      };
    }
  };


</script>

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi
Pay attention to the public account
domineering programmer
Get programming-related eBooks, tutorial pushes, and free downloads.

accomplish

Add an 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>

how to set its options

Loop an object array dates through v-if, and label is bound to the value of this option, that is, the actual passed value, and the actual displayed value is displayed by {{date.label}}.

assign a value to this array of objects

  data() {
    return {
      dates: dateOptions,

Here it is set to a fixed value, which can be set to request background data and assign the list of objects to dates, here is to assign an object array constant to dates

const dateOptions = [
  {
    key: "d1",
    label: "1 No",
  },
  {
    key: "d2",
    label: "2 No",
  },
  {
    key: "d3",
    label: "3 No",
  },
  {
    key: "d4",
    label: "4 No",
  },
  {
    key: "d5",
    label: "5 No",
  },
  {
    key: "d6",
    label: "6 No",
  },
  {
    key: "d7",
    label: "7 No",
  },
  {
    key: "d8",
    label: "8 No",
  },
  {
    key: "d9",
    label: "9 No",
  },
  {
    key: "d10",
    label: "10 No",
  },
  {
    key: "d11",
    label: "11 No",
  },
  {
    key: "d12",
    label: "12 No",
  },
  {
    key: "d13",
    label: "13 No",
  },
  {
    key: "d13",
    label: "13 No",
  },
  {
    key: "d14",
    label: "14 No",
  },
  {
    key: "d15",
    label: "15 No",
  },
  {
    key: "d16",
    label: "16 No",
  },
  {
    key: "d17",
    label: "17 No",
  },
  {
    key: "d18",
    label: "18 No",
  },
  {
    key: "d19",
    label: "19 No",
  },
  {
    key: "d20",
    label: "20 No",
  },
  {
    key: "d21",
    label: "21 No",
  },
  {
    key: "d22",
    label: "22 No",
  },
  {
    key: "d23",
    label: "23 No",
  },
  {
    key: "d24",
    label: "24 No",
  },
  {
    key: "d25",
    label: "25 No",
  },
  {
    key: "d26",
    label: "26 No",
  },
  {
    key: "d27",
    label: "27 No",
  },
  {
    key: "d28",
    label: "28 No",
  },
  {
    key: "d29",
    label: "29 No",
  },
  {
    key: "d30",
    label: "30 No",
  },
  {
    key: "d31",
    label: "31 No",
  },
];

Then how to get the value in the check, by

v-model="form.checkList"

To achieve, bind the array formed by the selected label to the checkList of the form parameter object.

checkList is an array.

 

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

In this way, when the form is submitted to the background, the array of selected label s can be obtained.

Tags: Vue

Posted by nickiehow on Sun, 22 May 2022 01:06:40 +0300