zoukankan      html  css  js  c++  java
  • iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态

      在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是iview,PRD(原型图)上的表格要求要可以判断多个状态及在表头上添加图标,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的:

    这种表格相信大家都会觉得在iview里有,,实际上是没有的,而且可能也会有人觉得通过iview的render函数就是添加,但是这只是想对了一半,对于iview表格组件的tbody部分确实是可以通过render函数来进行修改,但是仅仅是针对tbody部分,对于表头则是通过renderheader进行一个修改,具体代码如下:

    接下来就是关于iview表格多个状态的判断,,一般情况下,我们只需要对两个状态进行判断,所以用简单的三目运算符就可以实现,但有时候可能会有多个状态,比如我这次的项目,基本都是五个状态,处理起来稍微麻烦一点,不过最终我还是写出来了,分享一下:

    这里面的status是后台传给你的状态,到自己的项目对号入座就行了,然后是格外用了一个iview的Tag标签,美观一点,,哈哈,,效果如下:

    在使用iview表格的时候还有一个问题需要注意,就是关于表格列宽自适应的问题,如果不是特别要求,建议不要给每一列设置宽度,这样反而会导致表格在大屏或者小屏幕下出来空白的情况,所以建议是不要设置固定宽度,就这样,希望可以帮到有需要的人,共勉!!!

  • 相关阅读:
    sonarqube添加C和C++语言
    sonarqube代码质量分析神器安装和使用
    sonarqube8.8汉化教程
    sonarqube代码分析平台踩坑指南
    解决Windows下PowerShell无法进入Python虚拟环境
    人工智能识别图片入门
    Python深拷贝和浅拷贝解读
    白嫖微软Azure12个月服务器
    Jmeter分布式压测
    Python+Appium实现自动抢微信红包
  • 原文地址:https://www.cnblogs.com/jianzhenghui/p/10015494.html
Copyright © 2011-2022 走看看