vue多选框组件

vue的多选框问题

首先在<template>里完成对组件的定义，定义了一个含有全选标志的多选框

<el-form-item label="城市" prop="cicty">
        <!-- <el-input v-model="dataForm.score" placeholder="成绩"></el-input> 
          对于indeterminate和v-model绑定的a和b的值
          如果true true 或者 true false样式为-
          如果false true样式为√
          如果false false样式为不勾-->
        <template>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="dataForm.score" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" 
          :label="city" 
          :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item> 

 在<script>定义多选的字段，比如

const cityOptions = ['城市1', '城市2', '城市3', '城市4'];

在<script>中的 methods区定义多选框格式，最后的显示结果为没有选择的时候多选框为空白，所有选项都勾选的时候，多选框自动被勾选，其他时候多选框内为一道横杠--

handleCheckAllChange(val) {
        this.dataForm.cicty= val ? cityOptions : [];  //全选
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },

多选框完成后在页面展示选中的数据

将绑定的属性设置为数组  cicty: []

在打印的时候加上join方法将选项连接起来 'cicty': (this.dataForm.cicty).join()