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

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

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

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

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

iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态的更多相关文章

  1. iview使用之怎样通过render函数在tabs组件中添加标签

    在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...

  2. IVIEW组件的render方法在Table组件中的使用

    后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:  https://gitee.com/wlovet/table-project 一.Rende ...

  3. Iview 在Table组件中添加图片

    要先简单了解render函数的使用. 直接上代码: { title: "商品图片", key: "commodityPhoto", align: 'center ...

  4. Vuejs2.0学习(Render函数,createElement,vm.$slots)

    直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...

  5. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  6. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  7. Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...

  8. render:h => h(App) ----render函数

    转载其他博客1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vu ...

  9. iview库表table组件内嵌套Select组件

    表格内render函数渲染Select组件   { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{   ...

随机推荐

  1. Spring Framework之IoC容器

    Spring IoC 概述 问题 1.什么是依赖倒置? 2.什么是控制反转? 3.什么是依赖注入? 4.它们之间的关系是怎样的? 5.优点有哪些? 依赖倒置原则 (Dependency Inversi ...

  2. 2.用eclipse创建maven Web

    一.其他步骤与上一个博客相同,故不赘述,这里要记得选war→Finish 二.在项目上右键选Properties 三.搜索到Project Facets,把勾取消掉,点Apply 四.重新勾选后出现以 ...

  3. Ardupilot(PX4)飞控驱动蜂鸣器和RGB细节

    Ardupilot(PX4)飞控驱动蜂鸣器细节 飞控代码细节 任务调用频率50HZ(20ms),buzzer.update() 内部将频率减少到10HZ(100ms) 单响(SINGLE_BUZZ) ...

  4. 不可被忽视的操作系统( FreeRTOS )【1】

    把大多数人每个星期的双休过过成了奢侈的节假日放假,把每天23点后定义为自己的自由时间,应该如何去思考这个问题 ? 双休的两天里,不!是放假的两天里,终于有较长的时间好好的学习一下一直断断续续的Free ...

  5. Java刷题知识点总结

    1,方法的重写(override)两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类方法访问权限. ...

  6. vulnhub~sunset:dusk1

    晚上闲来无事,准备做个target,结果是各种错误.在睡觉前还是没有顺利的做出来.先将TroubleSHOOTing 总结如下: 在用hydra爆破mysql的时候,发现 'MySql Host is ...

  7. C# 快速开发框架搭建—环境搭建

    一.新建MVC项目 打开vs2013新建空的解决方案,在解决方案中增加一个MVC项目,如图: 删除不需要的文件,剩下如图所示的文件夹: 首先创建一个MVC5控制器(Login,登入使用),该控制器无需 ...

  8. BigDecimal 笔记

    参数 BigDecimal 类主要有如下几个参数 这几个参数都比较好理解,看过这两个例子基本都能明白,现在总结一下就是 scale // 小数点后位数 precision // 一共位数 intCom ...

  9. HSRP热备份路由协议

    HSRP热备份路由协议 案例1:HSRP配置 案例2:三层交换配置HSRP 案例3:STP的配置 案例4:三层交换配置STP 1 案例1:HSRP配置 1.1 问题 在企业网络到外部的连接方案中,要求 ...

  10. 基于 HTML5 WebGL 的 水泥工厂可视化系统

    前言 如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是 工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信 ...