iview rander创建的checkbox无法取消选中

clipboard.png

clipboard.png

尝试过使用this.$forceUpdata()方法
尝试过使用this.$set()方法

阅读 3.6k
1 个回答
新手上路,请多包涵
<template>
    <div>
        <Table border :columns="columns4" :data="data1"></Table>
        <Button @click="handleSelectAll(true)">设置全选</Button>
        <Button @click="handleSelectAll(false)">取消全选</Button>
    </div>
</template>
<script> 
    export default {
        data () {
            return {
                columns4: [
                    {
                        title: 'chackBox多选',
                        key: 'rentFree',
                        align: 'center',
                        render: (h, params) => {
                            return h('Checkbox', {
                                props: {
                                    value: params.row.rentFree
                                },
                                on: {
                                    'on-change': event => {
                                        console.log("---------默认值--------");
                                        console.log(this.data1[params.index].rentFree);
                                        this.data1[params.index].rentFree = event;
                                        if (event) {

                                        } else {

                                        }
                                    }
                                }
                            });
                        }
                    },
                       {
                        title: '时间',
                        key: 'date'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        rentFree: false,
                        date: '2016-10-01'
                    },
                    {
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        rentFree: true,
                        date: '2016-10-02'
                    },
                    {
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        rentFree: false,
                        date: '2016-10-04'
                    }
                ]
            };
        },
        methods: {
            handleSelectAll (state) {
                //this.$refs.selection.selectAll(status);
                this.data1.forEach(un => {
                    un.rentFree = state;
                    console.log(un);
                    console.log(un.rentFree);
                });
            }
        }
    };
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题