layui框架实战案例(21):layui table单元格显示图片导致复选框冗余的解决方案

在这里插入图片描述

图片自适应表格CSS

为防止单元格内的图片不能正常显示,需本地重写CSS。

/*layui-table图片自适应*/
.layui-table-cell {height: auto;line-height: 20px;}.layui-table-cell img {height: 50%;max-width: 50%;
}

列代码

, cols: [[{type: 'checkbox',fixed:'left', width: 80}, {field: 'but_id', title: 'ID', sort: true, hide: true}, {field: 'but_serial', title: '编号', sort: true}, {field: 'but_name', title: '姓名', sort: true}, {field: 'but_phone', title: '联系电话', sort: true}, {field: 'but_url', title: '工作照片', align: 'center', width: 120, templet: function (d){return '<div οnclick="previewImg(\'' + d.but_url + '\');" style="cursor: pointer;"><img src="' + d.but_url + '" width="30" height="50"/></div>';}}, {field: 'lock', title: '操作', templet: '#checkboxTpl', unresize: true, align: 'center', width: 200}]]

在layui中,fixed:'left’是一个属性,用于规定表格列的固定位置。当这个属性被设置为’left’时,它表示表格的这一列将会被固定在左侧,即无论用户如何滚动页面,这一列都会保持在左侧。类似于其他的CSS样式属性,可以通过这个属性来控制表格的布局和用户的视觉体验。需要注意的是,如果需要固定的是两个以上的列,那么前面的每一列都需要加上fixed这个属性。

解决方案

去除复选框的fixed属性即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/168012.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper+HBase分布式集群环境搭建

安装版本&#xff1a;hadoop-2.10.1、zookeeper-3.4.12、hbase-2.3.1 一、zookeeper集群搭建与配置 1.下载zookeeper安装包 2.解压移动zookeeper 3.修改配置文件&#xff08;创建文件夹&#xff09; 4.进入conf/ 5.修改zoo.cfg文件 6.进入/usr/local/zookeeper-3.4.12/zkdata…

postgresql14-用户与角色(二)

介绍 查看 SELECT rolname FROM pg_roles;postgres是系统初始化时默认创建的角色&#xff0c;为超级管理员。 \duList of rolesRole name | Attributes | Member of ------------------------------------------------------…

Django结合Celery进行异步调用

目录 Celery介绍 相关环境 相关配置 1、在proj/proj/目录下创建一个新的celery.py模块 定义 Celery 实例&#xff1a; 2、在proj/proj/__init__.py 模块中导入这个应用程序。 3、在各自模块中定义任务文件tasks.py 4、settings.py配置 服务启动 异步调用 Celery介绍 C…

k8s-----4、yaml文件,做资源编排和资源对象部署

yaml文件 1、YAML 文件概述2、YAML 文件书写格式3、资源清单描述方法4、yaml文件编写4.1 没有真正部署资源的过程4.2 资源已经存在的时候 5、yaml文件中必须存在的属性 1、YAML 文件概述 k8s 集群中对资源管理和资源对象编排部署都可以通过声明样式&#xff08;YAML&#xff0…

Navicat 与清华大学校企合作交流会圆满落幕

2023 年 10 月 17 日&#xff0c;Navicat 中国与清华大学召开了校企合作交流会。2021 年年底&#xff0c;清华大学正式加入 Navicat 学术伙伴计划。本次会议旨在进一步促进学校信息化发展与服务能力&#xff0c;加强计算机以及相关学科的教学、专业实践与学术研究的综合能力。 …

Linux基础命令1——Linux的命令格式与命令分类

目录 Linux命令格式 Linux命令分类 如何判断命令的类型——Type命令 内置命令 外部命令 alias命令 命令的执行效率与过程 Linux命令格式 命令格式 完整的命令格式分为三部分&#xff1a;命令、参数、对象 其中命令与参数、参数与参数、参数与对象之间最少要有一个空格做…

栩栩如生,音色克隆,Bert-vits2文字转语音打造鬼畜视频实践(Python3.10)

诸公可知目前最牛逼的TTS免费开源项目是哪一个&#xff1f;没错&#xff0c;是Bert-vits2&#xff0c;没有之一。它是在本来已经极其强大的Vits项目中融入了Bert大模型&#xff0c;基本上解决了VITS的语气韵律问题&#xff0c;在效果非常出色的情况下训练的成本开销普通人也完全…

全链路压测专题---2、全链路压测架构和技术

如何开展全链路压测 业务模型梳理 首先应该将核心业务和非核心业务进行拆分&#xff0c;确认流量高峰针对的是哪些业务场景和模块&#xff0c;针对性的进行扩容准备梳理出对外的接口&#xff1a;使用MOCK&#xff08;模拟&#xff09;方式做挡板千万不要污染正常数据&#xf…

Vue2基础知识(四) 自定义指令

目录 一 自定义指令1.1 定义1.2 自定义局部指令1.3 全局注册指令1.4 钩子函数1.5 动态传参1.6 使用场景 &#x1f48c; 所属专栏&#xff1a;【Vue2】&#x1f600; 作 者&#xff1a;长安不及十里&#x1f4bb;工作&#xff1a;目前从事电力行业开发&#x1f308;目标&#xf…

【2024秋招】2023-8-5-小红书-数据引擎团队后端开发提前批面经

1 面试官介绍 OLAP引擎&#xff0c;离线引擎&#xff0c;大数据分析中间件 2 自我介绍 缺点&#xff1a; &#xff08;1&#xff09;面试官让重点介绍自己最在行的项目&#xff0c;我真的在自我介绍上扯了一些别的东西… &#xff08;2&#xff09;在面试的时候因为想看简…

浅谈RabbitMQ的延迟队列

Part 01、 延迟队列是什么 延迟队列代表了一种强大的消息传递机制&#xff0c;允许我们在将消息发送至RabbitMQ时&#xff0c;规定它们只能在未来某个预定的时间点被消费。这种特殊类型的消息被简称为"延迟消息"。 以RabbitMQ为例&#xff0c;它允许我们通过延迟…

无人值守变电站运维技术模式及应用-安科瑞黄安南

近年来&#xff0c;市场电子资源需求量的逐步上升&#xff0c;使变电系统建设逐步向复杂环境拓展。为保障变电系统运行稳定性及人员管理安全性&#xff0c;无人值班变电站技术运用势在必行&#xff0c;是解决复杂条件下变电设备运行不稳定及人员设备管理效益低下问题的重要核心…

熟练使用 Redis 的五大数据结构:Java 实战教程

入门 入门阶段主要记住 Redis 的命令&#xff0c;熟练使用 Redis 的 5 大数据结构就可以了。 如果没有 Redis 环境&#xff0c;可以直接通过这个网址https://try.redis.io/&#xff0c;很赞&#xff0c;它会给你模拟一个在线的环境可供你尽情使用&#xff01; 熟练使用Redis的…

AIGCA综述: Survey on Video Diffusion Models

论文作者&#xff1a;Zhen Xing,Qijun Feng,Haoran Chen,Qi Dai,Han Hu,Hang Xu,Zuxuan Wu,Yu-Gang Jiang 作者单位&#xff1a;Fudan University;Microsoft Research Asia;Huawei Noahs Ark Lab 论文链接&#xff1a;http://arxiv.org/abs/2310.10647v1 项目链接&#xff1…

1024程序员狂欢节有好礼 | 前沿技术、人工智能、集成电路科学与芯片技术、新一代信息与通信技术、网络空间安全技术

&#x1f339;欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 1024程序员狂欢节有好礼 &#x1f6a9;&#x1f6a9;&#x1f6a9;点击直达福利前言一、IT技术 IT Technology《速学Linux&#xff1a;系统应用从入门到精通》《Pytho…

物证管理系统|智物证DW-S404是一套成熟系统

系统背景 我司物证智能管理系统&#xff08;智物证DW-S404&#xff09;是一套成熟系统&#xff0c;依托互3D技术、RFID技术、数据库技术、AI、视频分析技术对物证进行统一管理、分析的信息化、智能化、规范化的系统。 物证是公安或者监狱处理案件的关键凭证&#xff0c;针对过…

cmake工程出现“CMAKE_CUDA_ARCHITECTURES must be non-empty if set.“的解决方法

解决方法1: cmake工程出现“CMAKE_CUDA_ARCHITECTURES must be non-empty if set.“的解决方法 – The CUDA compiler identification is unknown CMake Error at /usr/share/cmake-3.24/Modules/CMakeDetermineCUDACompiler.cmake:602 (message): Failed to detect a defaul…

前端数据可视化之【series、series饼图配置】配置项

目录 &#x1f31f;Echarts配置项&#x1f31f;series&#x1f31f;饼图 type:pie&#x1f31f;写在最后 &#x1f31f;Echarts配置项 ECharts开源来自百度商业前端数据可视化团队&#xff0c;基于html5 Canvas&#xff0c;是一个纯Javascript图表库&#xff0c;提供直观&…

读取不同格式文件中的内容(xlsx,csv,txt,npz,yaml)

1.读取.xlsx中的内容 import pandas as pd# 读取Excel文件 data pd.read_excel(your_file.xlsx) # 替换 your_file.xlsx 为你的文件路径# 现在&#xff0c;data 包含了Excel文件中的数据&#xff0c;可以像访问数据框一样访问和操作它 # 例如&#xff0c;你可以使用 data.he…

计算机网络-计算机网络体系结构-传输层

目录 一、UDP 二、TCP 特点 首部格式 连接管理 可靠传输 流量控制(点对点) 拥塞控制(全局) 三、拥塞控制算法 慢开始&拥塞避免 快重传&快恢复 功能一&#xff1a;提供进程与进程之间的逻辑通信 功能二&#xff1a;复用和分用 功能三&#xff1a;对收到的报…