layui--table里使用switch

最新推荐文章于 2025-02-18 11:46:09 发布

原创

最新推荐文章于 2025-02-18 11:46:09 发布 · 1.4k 阅读

标签

#layui #前端

收录于

1. 项目需求

在layui.table上面渲染后的列表上面加一个switch开关，监听switch开关的动作，实现本列数据的状态切换！
实现效果如下：
在这里插入图片描述

2. 实现方式

下面介绍的思路都是利用table的templet模板实现的，不同的在于模板代码。
表格配置参数：

table.render({
   
   
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {
   
   field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{
   
   field: 'username', title: '用户名', width:80}
      ,{
   
   field: 'sex', title: '性别', width:80, sort: true}
      ,{
   
   field: