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)
}
然后我点击子组件显示的文字想让父组件的。。被勾选中的内容,去掉勾选!
阅读 6.5k
3 个回答

element给出了选中和取消的属性isIndeterminate,通过change事件改变该属性的boolean的属性值贴上代码

<template>
  <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">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = 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;
      }
    }
  };
</script>

checkbox 加个v-model="city.check",每个aras的数据添加一个{check:false}
$emit把index和this.ipTm[i].selected传过去,$on接收,然后this.aras[传过来的index].check = 传过来的selected

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题