猿问

element ui 中的chekbox 哪个属性是让它取消勾选啊?

<el-checkbox-group v-model="abCityone" @change="handleCheckedCitiesChange1">


      <el-checkbox  v-for="(city, index) in aras" :label="city" :key="index"  @change="retAurn(index)">{{city.name}}</el-checkbox>

    </el-checkbox-group

    

    点击的时候,会勾选!

    然后我设置了一个子组件,用来显示勾选的内容!

    <li v-for="(item, index) in ipTm"

    :key="index"

    v-show="item.selected" @click="remove(index)">

  {{item.name}}

</li>

remove: function (i) {

  this.ipTm[i].selected = false

  this.$emit('vbl', this.ipTm[i].selected)  传给父组件的是一个false

  console.log(i, 1111)

  console.log(i, 2222)

}

然后我点击子组件显示的文字想让父组件的。。被勾选中的内容,去掉勾选!


白猪掌柜的
浏览 957回答 1
1回答

墨色风雨

element给出了选中和取消的属性isIndeterminate,通过change事件改变该属性的boolean的属性值贴上代码<template>&nbsp; <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>&nbsp; <div style="margin: 15px 0;"></div>&nbsp; <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">&nbsp; &nbsp; <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>&nbsp; </el-checkbox-group></template><script>&nbsp; const cityOptions = ['上海', '北京', '广州', '深圳'];&nbsp; export default {&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; checkAll: false,&nbsp; &nbsp; &nbsp; &nbsp; checkedCities: ['上海', '北京'],&nbsp; &nbsp; &nbsp; &nbsp; cities: cityOptions,&nbsp; &nbsp; &nbsp; &nbsp; isIndeterminate: true&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; handleCheckAllChange(val) {&nbsp; &nbsp; &nbsp; &nbsp; this.checkedCities = val ? cityOptions : [];&nbsp; &nbsp; &nbsp; &nbsp; this.isIndeterminate = false;&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; handleCheckedCitiesChange(value) {&nbsp; &nbsp; &nbsp; &nbsp; let checkedCount = value.length;&nbsp; &nbsp; &nbsp; &nbsp; this.checkAll = checkedCount === this.cities.length;&nbsp; &nbsp; &nbsp; &nbsp; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };</script>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答