iview使用之怎样通过render函数在tabs组件中添加标签
在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件进行组合使用,楼主在这段时间开发管理系统的过程中就遇到了要在Tab组件里填加Select组件,然后又要弹出一个Modal的需求,在tabs中添加Select组件着实花了我不少精力去开发,所以现在完成之后就打算记录下来以供看到的人来进行一个参考,不足之处还望指出!
首先,先把需求贴出来:

这里我们可以看到,产品在这个地方要求有一个tabs切换效果,脑洞的是居然要求把tabs的切换按钮改造成一个Select用来实现对tabs表头名称的修改与删除,当时也是一脸懵逼,后来查阅了Iview Tabs组件的相关API,发现可以通过render函数进行添加或修改,我也是在官网中的这个例子上找到了灵感。如下:
不难发现,我们可以通过render函数对Tabpane的Label进行修改,于是在网上百度了一堆相关资料,很多只是对Table组件的render函数有介绍,关于修改Tabs的少之又少,好在最后还是找到了一篇相关的文章,于是对这篇文章的示例进行了修改,达到了想要结果,如下:

关于它的代码实现,各位可以参考参考,如下图:

这个只是一个示例的render函数的写法,和直接在tabpane里修改它的label几乎完全一致,可以根据自己的需求进行修改,只不过要将tabpane的label通过v-bind进行绑定,然后参考官网给的修改label标签的render函数进行修改,至于render内部的写法可以参考我的这个,都是一个思路,共勉!
iview使用之怎样通过render函数在tabs组件中添加标签的更多相关文章
- iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
- IVIEW组件的render方法在Table组件中的使用
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址: https://gitee.com/wlovet/table-project 一.Rende ...
- Iview 在Table组件中添加图片
要先简单了解render函数的使用. 直接上代码: { title: "商品图片", key: "commodityPhoto", align: 'center ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- render:h => h(App) ----render函数
转载其他博客1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vu ...
- 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 ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- vue入门:(底层渲染实现render函数、实例生命周期)
vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...
随机推荐
- OpenCV-Python 读取显示图像 | 五
目标 在这里,你将学习如何读取图像,如何显示图像以及如何将其保存回去 你将学习以下功能:cv.imread(),cv.imshow(),cv.imwrite() (可选)你将学习如何使用Matplot ...
- 使用Keras进行深度学习:(二)CNN讲解及实践
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 现今最主流的处理图像数据的技术当属深度神经网络了,尤其是卷积神经网 ...
- 类加载机制之ClassLoader
1,类加载 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑,这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件,”.class”文件中保存着Java代码经转换 ...
- 图解GC流程
GC流程是每一个Java开发人员都应该掌握的内容.你知道什么时候触发Minor GC?什么时候触发 Minor GC 的过程是怎么样的?Full GC 的过程又是怎么样的?这一切都要从「压死骆驼 ...
- CodeForces 687A NP-Hard Problem
Portal:http://codeforces.com/problemset/problem/687/A 二分图染色 好模板题 有SPJ 值得注意的是,因为C++的奇妙的运算机制 若在vector变 ...
- vue引入echart Error in mounted hook: "ReferenceError: myChart is not defined" found in
解决办法: // 实例化echarts对象 var/let myChart = echarts.init(this.$refs.myChart)
- shell查询目标jvm的perm占比
#查询指定进程号下面的方法区使用率,jdk1.7是perm,jdk1.8是metaspace function get_perm_use_percent() { pid="$1" ...
- Spring Boot入门系列(十)如何使用拦截器,一学就会!
前面介绍了Spring Boot 如何整合定时任务已经Spring Boot 如何创建异步任务,不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhon ...
- ansible--ansible基础
配置文件 ansible的配置文件只有一个,即ansible.cfg,它可以存在于多个地方,ansible读取配置文件的顺序依次是当前命令执行目录->用户家目录下的.ansible.cfg-&g ...
- PowerShell入门简介
文章更新于:2020-03-03 一.PowerShell简介 说实话,我总感觉 PowerShell 是 cmd 的加强版,但是看官方介绍,功能甚是强大,用处有待我们发掘. 二.PowerShell ...