html多选框 圆,ant-design for vue 组件库中的多选框checkBox

目前我所做的项目中用到了vue的一个组件库----ant-design，是目前比较流行了三大组件库之一

在应用到其中的标签时发现了其中的一个bug

代码如下：

拥有一定js基础的程序员都知道，在原生的js中，多选框的书写方式如下

我们可以通过如下方式来更改多选框的勾选状态

let el = document.getElementById(id)

el.checked = false

其中checked表示多选框的勾选状态以及触发的 勾选/取消勾 选这个动作

但在ant-design组件库中我发现，当我将isChecked的状态置为false时，多选框的转态确实没有被勾选上，但是勾选的动作确实已经提交了，下次点击时触发的仍然是取消勾选，这与展示给用户的勾选状态明显不一致。

为了证实这一想法，我进行了如下操作。

搭建一个vue-cli项目模板，使用npm安装ant-design组件。

更改三个文件

main.js如下

import Vue from 'vue'

import App from './App'

import router from './router'

import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

App.vue代码如下

HelloWorld.vue代码如下

Checkbox

可以屏蔽main.js中的import ‘ant-design-vue/dist/antd.css’，通过操作可以明显观察到现象，他只是通过样式改变了多选框的状态，并没有改变其checked动作，当多选框的状态改变后，其动作并没有发生改变。

解决方法：

在标签上绑定一个id，通过id获取他的原生js，然后改变其checked这个方法，使得与展示给用户的状态与勾选动作一致。

代码如下：

Checkbox

let el = document.getElementById(“id1”)

el.checked = false

通过获取原生的改变其实际动作。这里可以打印出el，做具体的观察。