iview checkbox点击两次才能取消全选?

        <div>

          点击全选后再点击取消全选,结果没取消,再点第二次才取消全选
            <CheckboxGroup
                v-model="checkedItems"
                @on-change="checkboxOnChange"
            >
                <Checkbox
                    v-for="(item,index) in userList"
                    :label="item.userId+'|'+item.name"
                    :true-value="item.checked"
                    :false-value="!item.checked"
                    :key="item.userId"
                    :value="item.userId"
                    v-model="item.checked"
                >
                    {{item.name}}{{item.userId}}
                </Checkbox>
            </CheckboxGroup>
        </div>
        <div
            slot="footer"
            style=""
        >
            <Button
                type="primary"
                @click="checkAll"
            >全选</Button>
            <Button
                type="primary"
                @click="noCheck"
            >全不选</Button>
            <Button
                type="primary"
                @click="confirm"
            >确定</Button>
        </div>
        
        userList: any = [
            {
            checked:0,
            isMatch:false,
            mobile:"13822254125",
            name:"bbb",
            userId:"13822254125"},
            {
            checked:0,
            isMatch:false,
            mobile:"15955562323",
            name:"aaa",
            userId:"15955562323"}
        ];
          checkAll() {
            for (let i = 0; i < this.userList.length; i++) {
              this.userList[i].checked = 1;
            }
            this.checkedItems = this.userList;
            this.menuIds=[];
            this.menuNames=[];
            console.log("this.checkedItems:",this.checkedItems)
            for(let j=0;j<this.checkedItems.length;j++){
              this.menuIds.push(this.checkedItems[j].userId)
              this.menuNames.push(this.checkedItems[j].name)
            }
         }
          noCheck() {
            console.log("noCheck")
            for (let i = 0; i < this.userList.length; i++) {
              this.userList[i].checked = 0;
            }
            console.log("this.userList:",this.userList)
            this.checkedItems = [];
            this.menuIds=[];
            this.menuNames=[];
          }
        
        
阅读 4.3k
1 个回答

trueValue = true;
falseValue = false;
<CheckboxGroup

                v-model="checkedItems"
                @on-change="checkboxOnChange"
                value=""
            >
                <Checkbox
                    v-for="(item,index) in userList"
                    :label="item.userId+'|'+item.name"
                    :true-value="trueValue"
                    :false-value="falseValue"
                    :key="item.userId"
                    :value="item.userId"
                    v-model="item.checked"
                    :indeterminate="indeterminate"
                >
                    {{item.name}}{{item.userId}}
                </Checkbox>
            </CheckboxGroup>
            原来是userList被我少写了属性checked,还有就是true-value属性赋值为true,false-value属性赋值为false,至此,问题解决了,好开心啊~
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题