解决layui动态加载复选框无法选中

最新推荐文章于 2024-04-19 17:21:00 发布

礼拜八

最新推荐文章于 2024-04-19 17:21:00 发布

阅读量2.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui checkbox

本文链接：https://blog.youkuaiyun.com/qq_28073073/article/details/85337809

在使用layui构建后台界面时，遇到动态加载的checkbox选中问题，特别是涉及ajax数据、分页和页面加载速度时。通过layui的更新渲染方法和其他网络解决方案虽有改善，但在暴力测试下仍有偶尔无法选中的情况。为解决此问题，选择自定义复选框组件，该组件支持Vue绑定事件，能实现单选、全选、取消选中，并能获取选中项的id用于后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

1.最近用layui做后台界面，遇到layui跟ajax数据动态加载的checkbox，偶尔不能正常勾选，取消

2.有分页时，最后一页数据过少会导致其他页下方数据无法选中

3.页面没加载完或暴力测试时也会不能选中

利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况，但是暴力测试时偶尔还会出现，实在不知道什么原因，所以就用了一个折中的方法——自己写一个复选框

<!--原有layui复选框-->
<td>
    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
</td>
<!--替换为自己写的-->
<td>
    <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
        <div></div>
    </div>
</td>

自己写的同样支持vue绑定事件，并且支持单个选中、取消，全选和取消

//单个的选中取消

checkBox:function(n){
    var checkbox = $('tbody tr').eq(n).find('.checkBox');
    if (checkbox.attr("a") == "off") {
        checkbox.children("div").css({
            "display" : "block"
        });
        checkbox.attr