layui 前台框架列表页根据1或0返回上架和下架问题

最新推荐文章于 2024-07-07 21:07:20 发布

秃头中成长

最新推荐文章于 2024-07-07 21:07:20 发布

阅读量954

点赞数

CC 4.0 BY-SA版权

分类专栏：开发中遇到的问题

本文链接：https://blog.csdn.net/weixin_44013783/article/details/102860579

开发中遇到的问题专栏收录该内容

32 篇文章

订阅专栏

本文探讨了使用layui前端框架在列表页面中展示图片和实现状态切换的方法。通过自定义模板和条件判断，实现了商品图片的动态加载及商品上下架状态的文字显示。

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

在使用layui这款前台框架开发过程中经常会遇到很多问题例如
商品上架下架显示问题
在列表页中加

 var cols=[ //表头
            {checkbox: true, },
            {field: 'goodsName', width:"270", title: '商品名称',sort: true, },
            {field: 'price', width:"170" ,title: '商品价格'},
            {field: 'status', width:"140" ,title: '是否为新架',templet: '#titleTpl'},
            {field: 'image', width:"190" ,height:"172",title: '图片',templet:'<div><img src="{{ d.image }}"></div>'},
            {field: 'introduce', width:"203" ,title: '介绍'},
            {field: 'createtime', width:"191" ,title: '更新时间'},
            {title:'操作', width:"206", toolbar: '#table-useradmin-webuser',}
        ]

再添加一段js就大功告成了

<script type="text/html" id="titleTpl">
    {{#  if(d.status ==1){ }}
        下架
    {{#  }  else  { }}
        上架
    {{#  } }}
</script>

在这里插入图片描述
其实还有很多不懂的问题。例如：上面的这行代码

templet:'<div><img src="{{ d.image }}"></div>'

列表中读取图片路径，为什么一定是 d 把属性给携带出来，还得继续研究

<script type="text/html" id="titleTpl">
        {{#  if(d.data.sex =='男'){ }}
            公的
        {{#  } else if(d.data.sex =='女') { }}
            母的
        {{#  } else  { }}
             未知
        {{#  } }}
</script>

多条件这样写