美文网首页
el-table复选框显示异常

el-table复选框显示异常

作者: 85d8c4f3886f | 来源:发表于2021-11-21 15:44 被阅读0次

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

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

    错误示例 正确示例

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

    相关文章

      网友评论

          本文标题:el-table复选框显示异常

          本文链接:https://www.haomeiwen.com/subject/qdsbtrtx.html