需求如下:
需要做全选功能,但走接口时候缺需要每个值得下标,现在传得是他的name,所以要把数组改变一下
const cityOptions = [ {code: '0', name: '故障拖车'}, {code: '1', name: '电瓶搭电'}, {code: '2', name: '更换轮胎'}, {code: '3', name: '车辆充气'}, {code: '4', name: '困境救援'}, {code: '5', name: '路边快修'}, {code: '6', name: '吊装救援'}, {code: '7', name: '派送燃油'}, ];
页面渲染得时候是这样得
<el-form-item label="服务类型:" prop="serveType"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"> 全选 </el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" style="width:440px;"> <el-checkbox v-for="city in cities" :label="city.code" :key="city.code">{{city.name}}</el-checkbox> </el-checkbox-group> </el-form-item>
点击全选得时候 方法需要改变一下
handleCheckAllChange(val) { this.checkedCities = val ? cityOptions.map((res)=>{return res.code;}) : []; this.isIndeterminate = false; },
这样给后台传值就是它的code了