在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时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组件中添加标签的更多相关文章

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

    在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...

  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. vue render函数

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

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

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

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

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

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

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

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

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

  9. vue入门:(底层渲染实现render函数、实例生命周期)

    vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...

随机推荐

  1. Apple的Core ML3简介——为iPhone构建深度学习模型(附代码)

    概述 Apple的Core ML 3是一个为开发人员和程序员设计的工具,帮助程序员进入人工智能生态 你可以使用Core ML 3为iPhone构建机器学习和深度学习模型 在本文中,我们将为iPhone ...

  2. 食物图片变菜谱:这篇CVPR论文让人人都可以学习新料理

    根据 Facebook 的统计,Instgram 上的美食图片数量已经超过 3 亿张.然而,获取食物烹饪方法的途径依然有限,例如,通过烹饪网站或相关教程.怎样能够挖掘丰富食物图片背后的烹饪方法,让每个 ...

  3. 最小生成树(次小生成树)(最小生成树不唯一) 模板:Kruskal算法和 Prim算法

    Kruskal模板:按照边权排序,开始从最小边生成树 #include<algorithm> #include<stdio.h> #include<string.h> ...

  4. RabbitMQ AMQP 事务机制

    1,在之前的文章中介绍了RabbitMQ的五种队列形式 其中,在工作队列中,为了保证消费者的公平性,采用了channel.basicQos(1),保证了每次只发一条消息给消费者消费,并且使用手动签收的 ...

  5. 类加载机制之ClassLoader

    1,类加载 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑,这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件,”.class”文件中保存着Java代码经转换 ...

  6. __str_方法和__repr__的区别

    __str__方法和__repr__方法: 官方文档解释: Object.__repr__(self): 由 repr() 内置函数调用以输出一个对象的“官方”字符串表示.如果可能,这应类似一个有效的 ...

  7. VMware pro 15.5安装教程

    一,安装 1.VMware pro 15.5 下载地址:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evalu ...

  8. Matlab——m_map指南(4)——实例

    1. 全球/地区温度图 (1)读取数据 clear all setup_nctoolbox %调用工具包 tic %计时 %% nc=ncgeodataset('tmpsfc.gdas.199401. ...

  9. vue中的生命周期事件和钩子函数

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期.通俗的将就是vue实例从创建到销毁的 ...

  10. Python执行js之PyexecJs

    利用Python执行js 爬虫中会经常碰到JS加密,当我们找到他加密的JS代码之后我们需要获取它的返回值,python虽然可以模仿js写一个python版本的加密,但是这样有点费时间,也有点费头发~ ...