2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

如何解决 table 中 select 下拉被遮挡的问题

已完成
创建于  
2021-05-07 09:53

问题描述:

在 table 组件中使用 templet 属性实现 select 下拉时,存在被遮挡的问题。

评论 (1)

chengzhuo 创建了任务
chengzhuo 关联仓库设置为贤心/layui
展开全部操作日志

因为 table 单元格默认是单行模式,且会对元素溢出隐藏。

解决方案:

若还在使用 Layui,可升级到到 2.7 版本,采用新增的 css 基础参数项来实现。如:

table.render({
  elem: '#id',
  css: '.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}'
});

在线测试: https://codepen.io/sentsim/pen/bGvoXdP
注意事项: 要严格控制好内容长度不要超出单元格宽高度。

其他方案:

  • 使用 layui.dropdown 组件替代 select。
  • 或者将 select 改成:
<select lay-ignore class="layui-border">…</select>
贤心 添加了
 
常见
标签
贤心 任务状态待办的 修改为已完成
贤心 修改了描述
贤心 修改了标题
贤心 修改了描述
贤心 修改了描述
贤心 修改了标题

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891