el-checkbox遇到的渲染和勾选的问题

el-checkbox遇到的渲染和勾选的问题

使用场景

要求：多个el-checkout，可多选，但最多选6个，再次勾选会失败并提醒最多勾选六个。

场景：已勾选6个，再去勾选第七个时，勾选失败、弹出提醒，此时取消一个已勾选，再次勾选第七个，需点击两次才能选中

解决方法：在change后面添加native

<div v-for="item in dataList" :key="item.id">
    <span>已选中{{ item.order }}个</span>
    <el-checkbox @change.native="checkedChange(item)">
    	{{ item.des }}
    </el-checkbox>
</div>

但此时会出现span行延迟渲染，解决方法是在methods里面添加this.$forceUpdate()

checkedChange(item) {   
    // 方法
    ...
    this.$forceUpdate()
}