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

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

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

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

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

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

转载于:https://www.cnblogs.com/jianzhenghui/p/10015494.html

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

iView表格自定义展开、render函数的使用
iView版本3.0.因为展开的样式不太符合预期.只能自定义. 之前一直习惯使用template.render渲染函数使用很少.这次算是简单的认识下.代码写的不好大佬们不要见怪! 效果图完整代码 & ...
表格render函数中使用组件
{label: "操作",attrName: "caozuo",width: 180,align: "center",render: (h, ...
layui 借助 parseData 回调函数解析table 组件所规定的数据格式
table表数据内容操作,有时后台返回的数据格式不是所需要的数据格式,在layui table中需要自己定义所需要的数据格式: 可参考layui文档:https://www.layui.com/doc ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
iview使用render函数渲染嵌套表格
iview使用render函数渲染嵌套表格最近做项目遇到iview表格渲染,通过render函数来实现循环嵌套渲染表格及单元格内容,返回文字提示包含icon按钮的图标,当鼠标移到"复制&q ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
详解在vue项目中使用render函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力.这时你可以用渲染函数,它比模板更接近编译器. 基础如何使用: rend ...
iview在render函数中添加Poptip提示
前言: 在使用iview的table的时候删除一般为了防止误删,我们会用 poptip 气泡提示来进行操作二次限制,这里使用iview的table的render函数渲染直接加入效果图: 实现代码: ...
iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...

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

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

最新文章

热门文章