网站站长如何赚钱_gm网页游戏_seo优化什么意思_seo标题关键词优化

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()