el-table复选框显示异常

用vue+element写项目的时候遇到了一个问题,el-table的复选框按钮显示异常,具体表现为:

只选择了一条数据时,上面控制全选的复选框也会呈“全选中”状态,而不是“半选中”状态的只显示一条横线,这样会对用户使用造成干扰。


错误示例
正确示例

查看渲染出来的html,发现element是用class来控制“全选”和“半选中”的,如果是全选,对应的class为“is-checked”,如果是半选中,对应的class为“is-indeterminate”,是这里的判断出了问题,看网上的解决办法是直接forceUpdate,可是我这边不管是假数据还是真实的数据,结构都是一样的,也不是组件间传值的问题,最后发现和表格自带的`row-key`有关,如果这里没有写或者和数据里面的id名称对应不上,就会出现表格复选框渲染错误,改成自己的id就可以解决啦~

你可能感兴趣的:(el-table复选框显示异常)