LayUI默认样式调整

本文介绍了如何解决LayUI表格中单元格显示多行数据的问题,以及处理单元格宽度溢出时的下拉框显示,提供了解绑事件的方法以保持界面美观。同时,针对LayUI控件重写div样式导致的影响,提出了通过获取兄弟元素或父子元素来解决样式生效问题的技巧。
  • 1、Layui 表格一个单元格显示多行数据
.layui-table-cell {
    height: auto;
    text-overflow: inherit;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}
  • 2、Layui表格,单元格宽度溢出,鼠标移入时会出现下拉框,点击时会弹窗显示所有单元格内容,影响美观,可在表格渲染完毕后的done事件中解绑该事件
$('.layui-table-body').off('mouseenter','td');
  • 3、Layui控件会重写当前div(传入layui控件的元素),一些style不会生效,要获取当前控件的兄弟元素或父子元素:
  • <div id="likeLevel' + i + '">' + 这里是控件div,可能在表格里,因此每个元素设置id不方便 + '</div><div style="display:none;">' + 把一个其他地方用到的属性隐藏在这里 +'</div>

    下文中{其他作用域}this.spanthis可以指向控件内的元素,但不能this.next() {this本身是一个包含了当前控件的对象,但不是指向某一个元素,所以this.parent()指向别的地方会报错}

    因此,想要使用旁边元素,可以先指向子元素,在指到父元素:

    this.span.parent().next().text();

 

 

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值