layui table数据表格处理select或其他下拉组件不显示的问题

最新推荐文章于 2023-12-13 15:22:40 发布

原创最新推荐文章于 2023-12-13 15:22:40 发布 · 7.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#layui #table

本文介绍如何在layui表格中使用自定义模板，通过添加下拉菜单操作来增强列的功能，仅需简单修改样式即可实现。

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

//列的自定义模板 select 。。  这里也可以是列的下拉操作按钮

<script type="text/html" id="titleTpl">
    <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
</script>

table.render({
//其余的省略。。。 

  ,cols: [[ 
      {field:'title', title: '操作',fixed:'right',templet: "#titleTpl"}
    ]]
  ,done: function(res, curr, count){
      //数据渲染完的回调。
      //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
      $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
     }
  });

其实可以看到，也就加了一行改变样式的代码！