layui表格内容优化

之前图片


价格是从表里的数据,表中为分,对其进行优化

之后图片


看着更加清晰明了

上代码

代码片.

// cols : [[{type: 'checkbox',align:'center', width: 80},{type:'numbers',title:'序号',width: 60},{field: 'id', title: '编码', width:200,align:'center'},{field: 'name', title: '产品名称', width:300,align:'center'},{field: 'imgUrl', title: '产品图片', width:120,align:'center'},{field: 'price', title: '价格', width:120,align:'center',templet:function(price){return price.price/100+'元';}}  ,// {field: 'price', title: '价格', width:120,align:'center'}   ,{field: 'goodsType', title: '产品类型', width:120,align:'center'},//{field: '', title: '状态', width:150,align:'center',toolbar: '#barDemo'},// {field: '', title: '操作', width:150,align:'center',toolbar: '#barDemo'},]]

使用templet:function()对表中内容进行修改
function(price)括号中的price可为其他内容,但要和return后面的第一个price对应.第二个price要和field:'price’对应

更多图片展示


代码片

cols : [[{type: 'checkbox',align:'center', width: 80},{type:'numbers',title:'序号',width: 60},{field: 'temperature', title: '空气温度', width:200,align:'center',templet:function(temperature){return temperature.temperature/10+' ℃';}},{field: 'humidity', title: '空气湿度', width:150,align:'center',templet:function(humidity){return humidity.humidity/10+' %';}},{field: 'pmtwo', title: 'PM2.5', width:150,align:'center',templet:function (pmtwo) {return pmtwo.pmtwo+' ug/m3';}},{field: 'pmten', title: 'PM10', width:150,align:'center',templet:function(pmten){return pmten.pmten+' ug/m3';}},{field: 'noise', title: '噪音', width:150,align:'center',templet:function (noise) {return noise.noise/10+' dB';}},{field: 'tvoc', title: '空气品质', width:150,align:'center',templet:function (tvoc) {return tvoc.tvoc+' PPM';}},]]

Layui表格优化(表格显示内容后面加 元 或者其他文字或符号)相关推荐

  1. oracle 数据库字段html显示正常text显示不全,layui表格字段表格显示不全(自适应)...

    本文将为您描述layui表格字段表格显示不全(自适应),具体操作方法: 好记性不如烂笔头.本来就是没什么好记得东西,下次再用时已经想不起来了. 问题如下

  2. layui table 每列加标签_【前端】layui表格中根据条件给对应的列加背景色

    [前端]layui表格中根据条件给对应的列加背景色 [前端]layui表格中根据条件给对应的列加背景色 1.效果(根据条件动态给表格加背景色) 2.代码: 在我自己的项目中,由于条件比较多,提取出了一 ...

  3. layui 表格内容写temple函数_templet渲染layui表格数据的三种方式

    layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...

  4. layui表格中给对应的列加背景色

    layui表格中给对应的列加背景色 直接在style加样式即可,里面的status跟列的field对应上,data-content是field的值. <style>td[data-fiel ...

  5. 关于element table 动态表头+动态表头及内容+表格优化+初始化表格+隐藏功能,技术提升请来!

    本篇文章属于升级版,欢迎交流指教~~ 导航: 表格头部与内容对不齐 表格内容过长 处理初始化闪过暂无数据 动态表头1 动态表头+内容2 动态表头及层级表头 1.第一个就是表格头部与内容对不齐的问题了, ...

  6. 做ppt课件直播时如何解决ppt表格内容无法加载问题

    表格内容无法加载一般是由于,源文件格式非PPT/PPTX,导致PPT转格式时丢失内容导致.为解决该问题,我们可以将源文件格式转为PPT/PPTX格式后,重新上传文档,即可解决. 解决步骤如下(以off ...

  7. 同一列表格前面加相同的内容怎么加(包括文字、字符、数字、英文)

    同一列表格前面加相同的内容怎么加(包括文字.字符.数字.英文) 在前面加"%%111000##qaz添加"字样 选中列,右击点击设置单元格格式->数字(自定义)->&q ...

  8. layui表格展示数据时:返回的数据不符合规范,正确的成功状态码应为:code: 0

    1.今天,用django和layui结合,处理表格展示数据时,有数据的表格能正常显示列表,无数据的表格却提示了:返回的数据不符合规范,正确的成功状态码应为:"code": 0,于是 ...

  9. layui表格重载后界面闪动解决方案

    layui框架默认提供的table模块,使用该模块可以快速高效的完成表格数据的开发.但是最近在使用过程中发现了一些小问题.下面一起来看下吧! 官方说明地址:https://www.layui.com/ ...

最新文章

  1. 五、开始学习Excel函数,效率快速提高
  2. 开花 (Standard IO)
  3. 【软件工程】集成开发
  4. 《中国企业报》:SNS网站稳步发展进军海外
  5. MySQL导出表结构
  6. Mac os 进行Android开发笔记(1)
  7. SimpleGIS在线地图插件
  8. 实验5 数独游戏界面设计
  9. 【畅捷通T+Cloud】12.3版本上线啦!
  10. 公众号要如何排版?这几个必备公众号排版技巧千万不要错过哦
  11. oracle数据文件大小
  12. 适合c语言初学者的刷题网站
  13. 简易xp画图板程序流程
  14. python生成器能用while吗_Python:在while循环中使用生成器
  15. 谈谈红楼梦(第1-5回)
  16. RT-thread初学
  17. 传奇服务器人物技能怎么修改,如何修改传奇服务器中角色等级相关系统
  18. Linux 回收内存
  19. 工具类系列---【金融常用工具类】
  20. 同样被腾讯微信“供养”,唯品会蘑菇街却与京东拼多多背道而驰

热门文章

  1. 空格处 i: 未声明的标识符_读睡诗词精选|千万相思离别句,人间没个安排处...
  2. 网吧电脑怎么录屏?网吧电脑怎么录游戏
  3. python一行代码是什么意思_一行Python代码能做什么?
  4. 智慧教室系统--温湿度控制系统
  5. 树莓派初次编译Qt时系统卡死问题
  6. sql server存储过程基本写法
  7. Selenium常用操作——关闭页面和浏览器
  8. Python去除字符串前后空格的几种方法
  9. 哥大涉嫌数据造假,被U.S. NEWS「踢出」2022年最佳大学排名!
  10. 正则表达式可视化+测试工具