合并单元格

最新推荐文章于 2024-07-30 20:50:32 发布

信晨阳

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量74

点赞数

文章标签： java 前端 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_61644572/article/details/131342230

版权

arraySpanMethod({row, column, rowIndex, columnIndex}) {
   const fields = ["CELL_NAME", "TYPE_NAME", "CLASSNAME"];
   const cellValue = row[column.property];

   if (cellValue && fields.includes(column.property)) {
      const prevRow = this.restable_body[rowIndex - 1];
      let nextRow = this.restable_body[rowIndex + 1];
      if (prevRow && prevRow[column.property] === cellValue) {
         return {rowspan: 0, colspan: 0};
      } else {
         let countRowspan = 1;
         while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.restable_body[++countRowspan + rowIndex];
         }
         if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1};
         }
      }
   }
},

:data="restable_body"

<el-table-column  fixed="left" align="left" prop="CELL_NAME" min-width="80" label="单元"  type="Y"></el-table-column>
<el-table-column  fixed="left" align="left" prop="TYPE_NAME" min-width="100" label="区域"  type="Y"></el-table-column>
<el-table-column  fixed="left" align="left" prop="CLASSNAME" min-width="100" label="分类" type="Y"></el-table-column>
<el-table-column  fixed="left" align="left" prop="ITEM_NAME" min-width="120" label="指标" type="Y"></el-table-column>
<el-table-column  fixed="left" align="left" prop="ITEM_UNIT" min-width="80" label="单位"  type="Y"></el-table-column>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
合并单元格

el-table-column fixed="left" align="left" prop="TYPE_NAME" min-width="100" label="区域" type="Y"></el-table-column><el-table-column fixed="left" align="left" prop="CELL_NAME" min-width="80" label="单元" type="Y"></el-table-column>
复制链接

扫一扫

信晨阳 CSDN认证博客专家 CSDN认证企业博客

码龄3年

30: 原创

78万+: 周排名

223万+: 总排名

1万+: 访问

: 等级

331: 积分

4: 粉丝

5: 获赞

4: 评论

12: 收藏

私信

关注

热门文章

分类专栏

笔记 24篇

最新评论

layui 时间选择器
Mitin_: 没有显示下拉的日期选择框是为什么
ajax的使用二级联动
信晨阳: <%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <meta charset="UTF-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all"> <script charset="UTF-8" src="plugins/layui/layui.js"></script> <script type="text/javascript" src="js/jquery-3.6.0.js"></script></head><body><form class="layui-form " layui-form-pane action="#"method="post"> <div class="layui-form-item"> <label class="layui-form-label">选择楼层</label> <div class="layui-input-inline"> <select id="Builiding" name="Builiding" lay-filter="xl"> <option >请选择</option> </select> </div> <div class="layui-input-inline"> <select id="Domitory" name="Domitory"> <option>请选择</option> </select> </div><div class="layui-input-inline"><a class="layui-btn" data-type="reload" id="btnSearch">搜索</a> </div> </div></form><table class="layui-table" lay-data="{height:315, url:'sstudent', page:true, id:'test',height: 'full-25'}" lay-filter="test" id="test"> <thead> <tr> <th lay-data="{field:'student_ID', width:200, sort: true}">学生ID</th> <th lay-data="{field:'student_DomitoryID', width:200,edit:true}" >学生公寓编号</th> <th lay-data="{field:'student_Username', width:200,edit:true}">学生网名</th> <th lay-data="{field:'student_Name', width:250,edit:true}">学生真实姓名</th> <th lay-data="{field:'student_Sex', width:220,edit:true}">性别</th> <th lay-data="{field:'student_Class', width:250,edit:true}">学生班级</th> <th lay-data="{field:'student_State', width:250,edit:true}">学生状态</th> <th lay-data="{title:'操作',align:'center',width:400,toolbar:'#barDemo'}">操作</th> </tr> </thead></table><script> layui.use(['table','layer'],function(){ var table=layui.table; var layer=layui.layer; var $=layui.jquery; table.on('tool(test)',function(obj){ var value=obj.value; var data=obj.data; var field=obj.field; layEvent=obj.event;//拿到后面监听事件对象 if(layEvent=="detal"){//表示我现在点击了查看按钮 layer.open({ type:2, title:"公寓管理员信息", content:"detal?id="+data.iD, area:['400px','600px'], shade:0.4, }); }else if(layEvent=="deleted"){ $.ajax({ url:"delete?id="+data.iD, type: "get", dataType:"text", success:function (data){ if(data==1){ location.reload(); } } }); }else if(layEvent=="edit"){ $.ajax({ type:"get", url: "update", dataType:"text", data:{ iD:data.iD, username:data.username, password:data.password, name:data.name, sex:data.sex, tel:data.tel, }, success:function (data) { if(data==1) { layer.msg("修改成功"); }else { layer.msg("修改失败"); } } }); }else if(layEvent=="add"){ layer.open({ type:2, title: "添加管理员", content:"add.jsp", area:['400px','600px'], shade:0.4, maxmin:true, end:function (){ location.reload(); } }); } }); $("#btnSearch").click(function(){//layui表格要重新加载，所以要用监听按钮 var sers=$("#search").val();//获得文本框的值 if(sers===""){ layer.msg("你要查找的用户搜索不能为空"); }else { table.reload("test",{ where:{ sers:sers//把获得的值传入给sers的参数（赋值） }, page:{ curr:1 } }); } }); }); layui.use(['form','layer','table'],function(){ var layer=layui.layer; var $=layui.jquery; var form=layui.form; var table=layui.table; $.ajax({ type:"get", url:"FBServlet", dataType:"json", success:function(data){ layer.msg("11") var obj=$("#Builiding"); for (var i=0;i<data.length;i++){ var ob="<option value='"+data[i].building_ID+"'>"+data[i].building_Name+"</option>" obj.append(ob); } layui.form.render("select"); } }); form.on(['select(xl)'],function(){ $.ajax({ type:"get", url:"Domitoryfind?domitory_BuildingID="+$("#Builiding").val(), dataType:"json", success:function(data){ $("#Domitory option:gt(0)").remove(); var dob=$("#Domitory"); for (var i=0;i<data.length;i++){ var obj="<option value='"+data[i].domitory_ID+"'>"+data[i].domitory_Name+"</option>" dob.append(obj); } layui.form.render("select"); } }); }); $("#btnSearch").click(function(){//layui表格要重新加载，所以要用监听按钮 var sers=$("#Domitory").val();//获得文本框的值 if(sers===""){ layer.msg("你要查找的用户搜索不能为空"); }else { table.reload("test",{ where:{ sers:sers//把获得的值传入给sers的参数（赋值） }, page:{ curr:1 } }); } }); });</script><script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="detal" >查看</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" >编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleted">删除</a> <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="add">添加</a></script></body></html>

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。