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

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

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

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

在使用iview表格的时候还有一个问题需要注意,就是关于表格列宽自适应的问题,如果不是特别要求,建议不要给每一列设置宽度,这样反而会导致表格在大屏或者小屏幕下出来空白的情况,所以建议是不要设置固定宽度,就这样,希望可以帮到有需要的人,共勉!!!
iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态的更多相关文章
- iview使用之怎样通过render函数在tabs组件中添加标签
在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...
- IVIEW组件的render方法在Table组件中的使用
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址: https://gitee.com/wlovet/table-project 一.Rende ...
- Iview 在Table组件中添加图片
要先简单了解render函数的使用. 直接上代码: { title: "商品图片", key: "commodityPhoto", align: 'center ...
- Vuejs2.0学习(Render函数,createElement,vm.$slots)
直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- render:h => h(App) ----render函数
转载其他博客1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vu ...
- iview库表table组件内嵌套Select组件
表格内render函数渲染Select组件 { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{ ...
随机推荐
- python框架-Django创建项目
创建项目 django-admin startproject douban//创建project cd douban python manage.py startapp books//创建app项目 ...
- Feign客户端的重构,新建springcloud架构
1,在上篇博文中,已经实现了feign 客户端来远程调用接口的功能,因为feign 客户端在springcloud 开发过程中是比较常用的方式 https://www.cnblogs.com/pick ...
- 线程 -- ThreadLocal
1,ThreadLocal 不是“本地线程”的意思,而是Thread 的局部变量.每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程所对应的副本 2, ...
- 文件上传 Window & Linux
1. 在application配置文件添加图片存储路径的参数 上传路径前必须加 file:/ 否则网页图片请求可能404window gofy: uploadPath: file:/F:/fileUp ...
- Python第三方包之pretty-errors
Python第三方包之pretty-errors 发现了一个第三方好用的python包,这个包可以让我们在面对冗长的错误时候能够一眼看到重点 安装方式 pip install pretty-error ...
- ES6 class 类的理解(一)
优点 ES6 的类提供了几点明显的好处: 兼容当前大量的代码. 相对于构造器和构造器继承,类使初学者更容易入门. 子类化在语言层面支持. 可以子类化内置的构造器. 不再需要继承库:框架之间的代码变得更 ...
- pycharm文件名颜色代表的含义
在使用pycharm过程中,文件名有不一样的颜色. 绿色:已经加入版本控制暂未提交 红色:未加入版本控制 蓝色:加入版本控制,已提交,有改动 白色:加入版本控制,已提交,无改动 灰色:版本控制已忽略文 ...
- Jmeter 压力测试笔记(3)--脚本调试/签名/cookie/提升吞吐量/降低异常率/提升单机并发性能
import XXXsign.Openapi2sign;---导入jar包中的签名方法 String str1 = "12121"; ---需要被签名的字段:向开发了解需要哪些哪些 ...
- mybatis源码配置文件解析之一:解析properties标签
mybatis作为日常开发的常用ORM框架,在开发中起着很重要的作用,了解其源码对日常的开发有很大的帮助.源码版本为:3-3.4.x,可执行到github进行下载. 从这篇文章开始逐一分析mybati ...
- MyBatis(四):SqlSession及其工厂类的作用域和生命周期
本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出1便就懂!b站搜索狂神说即可 https://space.bilibili.com/95256449?spm_id_from=333.788 ...