layui table组件宽度设置_layui table 宽度-程序员宅基地

技术标签： layui  前端  javascript  

开源框架Pear Admin，LayUI版本2.7.0.rc-5。

layui的table组件-基础参数-cellMinWidth可以设置最小宽度，表头参数可以设置width，以上可以适用大部分表格展示。

如今遇到一个需求，需要表格内容自适应，由单元格撑开宽度，找了api没有发现实现参数。

度娘未果，以下代码是自己实现的，如有问题请指正。

注意：字段较少时，请不要这样使用，直接设置宽度，不然表格内容会塌陷。

逻辑简单粗暴，关键参数（不是layui指定的参数，但是可以识别，layui指定设置数字和百分比）

cellMinWidth: 'auto'

 然后根据表格内容宽度设置表头宽度（layui数据和表头是两个‘table’）。

1. html页面

<table id="topic-table" lay-filter="topic-table"></table>

 2. js代码

// 字段内容省略
var cols = [{}];

// 表格渲染
table.render({
  elem: '#topic-table',
  url: ctx + 'topic/table',
  loading: true,
  height: 'full-65',
  page: true,
  cols: cols,
  skin: 'row,line',
  even: true,
  cellMinWidth: 'auto',
  toolbar: '#topic-toolbar',
  defaultToolbar: [{
    title: '刷新',
    layEvent: 'refresh',
    icon: 'layui-icon-refresh'
  }],
  done: function (res, curr, count) {
    var $data = $('div[lay-id="topic-table"]').find('.layui-table-body').find('tr').eq(0).find('td');
    var $head = $('div[lay-id="topic-table"]').find('.layui-table-header').find('tr').eq(0).find('th');
    for (var i = 0; i < $data.length; i++) {
      var l1 = $data.eq(i).find('div').width();
      var l2 = $head.eq(i).find('div').width();
      if (l1 > l2) {
        $head.eq(i).find('div').width(l1);
      } else {
        $data.eq(i).find('div').width(l2);
      }
    }
  }
});

3. 实现效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24258617/article/details/121697592

智能推荐

sqoop把hive表数据导入到mysql中_基于sqoop进行hive和mysql之间数据互导的研究论文-程序员宅基地

文章浏览阅读8.6k次。应用：SQOOP是用于对数据进行导入导出的。 (1)把MySQL、Oracle等数据库中的数据导入到HDFS、Hive、HBase中 (2)把HDFS、Hive、HBase中的数据导出到MySQL、Oracle等数据库中1.把数据从mysql导入到hdfs(默认是/user/)中 sqoop import --connect jdbc:mysql://hadoop0:_基于sqoop进行hive和mysql之间数据互导的研究论文

3维空间到2维空间投影的分类_下面投影方式中,哪些是3d场景到2d屏幕常用的投影方式-程序员宅基地

文章浏览阅读3.1k次。3维空间到2维空间投影的分类Written by Paul BourkeDecember 1994以下对大部分常用的把三维几何体投影到二维平面上的投影方法做了分类。每个类型都概括出了其简短的特点。全景投影：投影线彼此不平行。平行投影：投影线彼此平行。（下图翻译略）斜位投影斜位投影是平行投影的一种，但是它的投影_下面投影方式中,哪些是3d场景到2d屏幕常用的投影方式

USB TypeC接口和USB PD快充协议，有何区别？_pd controler能否区分usb的类型-程序员宅基地

文章浏览阅读1.1w次，点赞9次，收藏31次。很多人一下子搞不清楚，怎么USB即是TypeC又是USB PD呢？首先USB标准有几个版本的，比如USB2.0->USB3.0->USB3.1->USB 4.0，通常提到这个，说的是通信速度变快了。那USB TypeC又是什么呢？它主要是指接口，它出现之前，USB接口是多样的，比如：USB Type B：从USB 2.0开始定义，只有4个针脚，常用于打印机、显示器等的连接。Mini USB：分为A型，B型和AB型，从USB1.1/USB2.0开始就有定义，._pd controler能否区分usb的类型

qq协议 0825 和 0836 udp 登录包解析_抓包qq登录版本-程序员宅基地

文章浏览阅读3.5k次，点赞3次，收藏9次。qq协议 0825 和 0836 udp 登录包解析参考使用工具:概念解释udp报文解析0825 udp 发送包报文原始数据:解析0825 返回包原始数据解析0836 发送包原始数据解析参考0825包参考: https://www.cnblogs.com/mRRRR/p/5288931.html虽然是2016年的, 但是里面的结构大体还是不变参考: https://github.com/fa-ge/PCQQ-ProtocolPCQQ协议的实现, 这里面基本都写清楚了, 但是能不能用我还没试过, 最_抓包qq登录版本

JavaScript中的（内置）方式来检查字符串是否为有效数字_js 判断是的有效数字-程序员宅基地

文章浏览阅读1.2k次。我希望在与旧的VB6 IsNumeric()函数相同的概念空间中有东西吗？ _js 判断是的有效数字

PHP5.4NTS MYSQL_windows安装Apache2.4.3（mod_fcgi）+PHP5.4.10+Mysql5.5.29-程序员宅基地

文章浏览阅读129次。最近有朋友问我，根据我的以前的一个教程，用php5apache2_4.dll来运行php的http://www.myxzy.com/post-333.html，但是现在apachelounge官网没有php5apache2_4.dll文件下载了，只有一个mod_fcgid了，php的包里面也没有php5apache2_4.dll这个文件。所以就写了这个教程。这个教程是在windows下用Apach..._windows 安装apahce2.4安装mod_fcgid.so

随便推点

第5节LMDeploy 大模型量化部署实践：笔记_llmdeploy-程序员宅基地

文章浏览阅读1.6k次，点赞33次，收藏34次。我们先来介绍一下大模型的特点：首先就是参数量大，对于7B的模型，就需要14G以上的内存，并且由于是采用自回归的方式，所以这就需要去缓存之前的信息，这就会进一步增加消耗。而部署的定义就是将训练好的模型放在特定的环境（cpu，gpu，tpu，npu）接收输入，产生输出。这就要对模型进行优化，如模型压缩和硬化加速。从上面可以得出如何在低存储的设备上部署？如何提高token推理的速度？如何解决动态token的问题？如何提供系统吞吐量？对此现在有很多成熟的技术：低比特量化，模型并行等。_llmdeploy

信号量~~_sem_t-程序员宅基地

文章浏览阅读672次。信号量本质是一个计数器~用来描述临界资源的有效个数~POSIX和systeam V信号量都用于同步工作，达到无冲突的访问共享资源。但是POSIX可以用于线程同步~使用信号量首先就要创建一个sem_t类型的变量#include //头文件sem_t sem1;_sem_t

如何用python爬取e-hentai的图片-程序员宅基地

文章浏览阅读5.3w次，点赞6次，收藏26次。前言本来这是个正经的图片爬取教程，但是考虑到正经的教程一向是不会有人看的，所以干脆满足一下各位老绅士的心理，改成了E站的爬图教学。事先声明，本博客本质上还是个爬虫教学，所以不会提供任何ehentai访问方式和黄涩链接（代码本身也无法自动翻墙访问ehentai）。由于E站访问的问题，爬虫的效率具体也和网络稳定率有关，所以失败并不一定是代码有问题。博主并不常访问E站（不要说了，真的全是因为你们喜欢），所以对相关的页面并不是十分了解，如果有些页面反复使用该爬虫仍无法运行，那就可能是触及到了博主的知识盲区。（_e-hentai

flutter屏幕适配-程序员宅基地

文章浏览阅读240次。现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并..._flutter_screenutil适配宽度和高度

课程设计--计算机钢琴_计算机钢琴程序编写程序,程序运行时使 pc 机成为一架可弹奏的钢琴,当按下数字-程序员宅基地

文章浏览阅读2.7k次。计算机钢琴_计算机钢琴程序编写程序,程序运行时使 pc 机成为一架可弹奏的钢琴,当按下数字

用python动手学统计学_3-1使用python进行描述统计：单变量_num is deprecated and will be removed in python 3.-程序员宅基地

文章浏览阅读478次。基于python 3.9，使用pycharm community实现,本人水平非常菜，想要开始学习知识。内容基于这本书和一些网上资料如菜鸟网站等进行补充数学公式使用mathtype3-1使用python进行描述统计：单变量3-1-1统计分析与scipyimport scipy as sp3-1-2单变量的操作只有一种类型的数据import scipy as spimport numpy as npfish_data = np.array([2,3,3,4,4,4,4,5,5,6_num is deprecated and will be removed in python 3.14; use ast.constant 怎么

推荐文章

热门文章

相关标签