iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1、render渲染函数的介绍
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。
2、如何使用render函数?
下面是vue官网的例子var getChildrenTextContent = function (children) { return children.map(function (node) { return node.children ? getChildrenTextContent(node.children) : node.text }).join('') } Vue.component('anchored-heading', { render: function (createElement) { // 创建 kebabCase 风格的ID var headingId = getChildrenTextContent(this.$slots.default) .toLowerCase() .replace(/\W+/g, '-') .replace(/(^\-|\-$)/g, '') return createElement( 'h' + this.level, [ createElement('a', { attrs: { name: headingId, href: '#' + headingId } }, this.$slots.default) ] ) }, props: { level: { type: Number, required: true } } })
3、iview table组件介绍
主要用于展示大量结构化数据。
支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。
4、iview table组件的使用
渲染成如下表格:
5、iview table render函数和renderHeader介绍
render:
自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。 学习 Render 函数的内容
renderHeader:
自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column 和 index,分别为当前列数据和当前列索引。
6、iview table render函数的使用
渲染成如下table
7、iview render和renderHeader结合自定义组件,渲染table表格
QiDropdown.vue组件代码如下:
8、父组件引入QiDropdown组件并应用到table 的render和renderHeader函数中import QiDropdown from '@/components/QiDropdown' export default { name: 'email-list', components:{ QiDropdown }, ... columns: [ { title: '标注', key: 'callout', align:'center', renderHeader:(h,params)=>{ return h(QiDropdown,{ props:{ placement:'bottom-start', showArrow:true, content:'标注', data:this.flags }, on:{ 'on-choosed':(value)=>{ this.queryForm.callout = value; this.getResumeFromEmailBy(); } } }); }, render:(h,params)=>{ return h(QiDropdown,{ props:{ content:params.row.callout||'', data:this.flags.slice(1) }, on:{ 'on-choosed':(value)=>{ this.choosedFlag(params.row.id,value); } } },[ h('DropdownItem', { slot: 'diy', style:{ color:'#2d8cf0' }, props:{ name:'add', divided:true } }, '添加并标注'), h('DropdownItem', { slot: 'diy', style:{ color:'#2d8cf0' }, props:{ name:'clear' } }, '清除该标注') ]); } }, ...
渲染成如下所示:
9、总结:
1)有了render函数加上自定义组件,那么你再也不怕iview table组件功能的单调了,一开始我也以为iview table功能太少,现在有了它,你可以实现你任何想实现的表格了,非常简单!
2)iview Dropdown组件上一定要加 transfer 属性,否则它不能正常显示出来
3)render函数可以使用slot,如我的QiDrowdown组件里面有一个slot name=diy,那它在render函数里面就是要写到QiDrowdownr 数组中,如:h(QiDrowdown, {//这里写QiDrowdown属性props、事件on、样式style等等}, [//这里可以写slot组件,也可以是其它组件,如果是slot你要这样写: h('DropdownItem', { slot: 'diy',//记住这里要写上QiDrowdown组件slot的name style:{ color:'#2d8cf0' }, props:{ name:'add', divided:true } }, '添加并标注'), 这样渲染就等于是这样写: ]) https://segmentfault.com/a/1190000015970367
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...相关推荐
- vuejs的render渲染函数
官网文档地址:https://cn.vuejs.org/v2/guide/render-function.html 引入: vue推荐绝大数情况下实验template创建 html,但是我们时常在vu ...
- iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行
文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...
- 二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么 具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
- jdbc取款怎样限制条件_京东张亮:我们是怎样打造一款分布式数据库的
我们是怎样打造一款分布式数据库的 作者 | 张亮 关系型数据库在过去数十年的数据库领域一直占据着绝对主导的地位,它所带来的稳定性.安全性和易用性,成为了构建现代化系统的基石.随着的互联网高速发展,构架 ...
- 自定义列_如何对Pandas DataFrame进行自定义排序
Pandas DataFrame有一个内置方法sort_values(),可以根据给定的变量对值进行排序.该方法本身使用起来相当简单,但是它不适用于自定义排序,例如, t恤尺寸:XS.S.M.L和XL ...
- java自定义配置文件_基于java读取并引用自定义配置文件
基于java读取并引用自定义配置文件 首先在resources目录创建自定义的配置文件 配置文件的格式: 写工具类,得到配置参数 import java.io.IOException; import ...
- css 商城 两列_基于SSM的网上水果生鲜超市商城管理系统
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以.IDE环境: Eclipse,Myeclipse,IDEA都可以tomcat环境: Tomcat 7.x,8. ...
- computed set 自定义参数_完全理解Vue的渲染watcher、computed和user watcher
作者:Naice https://segmentfault.com/a/1190000023196603 这篇文章将带大家全面理解vue的watcher.computed和user watcher,其 ...
- mysql inet_aton 原理_基于Mysql的IP处理函数inet_aton()与inet_ntoa()的深入分析_MySQL
bitsCN.com 有个统计需求,需要对IP进行分类统计,Mysql提供了inet_aton()和inet_ntoa()函数进程处理. 具体可以查看官方手册. INET_ATON(expr)给出一个 ...
最新文章
- 老赖凭本事骗钱,你有本事不被骗吗?
- PhoneGap与Jquery Mobile结合开发android应用配置
- Python Django 模板继承(header,body,footer抽取)
- 2021前端高频面试题整理,附答案
- 计算机在科技英语翻译中起的作用,浅谈科技英语翻译中英语词语的正确理解与表达...
- linux 安装dubbo+zookeeper
- Atitit SpringCloud 使用总结 目录 1.1. 启动一个服务注册中心EurekaServer	1 1.2. 三、创建一个服务提供者 (eureka client)	2 1.3. 创建
- python数据分析百度云资源_数据分析师视频教程百度云网盘下载
- 地理空间数据和大数据平台Spark结合能做的事情
- 基于Markdown语法的个人简历
- Android Performance之工具篇(1)-systrace
- DirectX11 With Windows SDK--21 鼠标拾取
- supersu_如何使用SuperSU和TWRP扎根Android手机
- 虚幻基础之Gameplay游戏框架之Level和World
- 游戏制作策划人员指南
- 阿里出品移动研发“神器” 阿里移动云系列第二篇|“移”步到位:一站式移动应用研发体系...
- dmidecode命令手册
- 《货币商人》读后感作文选登3800字
- RxPermissions——权限申请库
- Redis数据持久化机制AOF原理分析二
热门文章
- 面试-重写基础功能函数
- Python基础教程之第3章 使用字符串
- [Android]使用MVP解决技术债务(翻译)
- 推荐两本移动开发挺火的书
- 让MySql支持Emoji表情(MySQL中4字节utf8字符保存方法)
- javaweb简要介绍,虚拟路径,虚拟主机
- MySQL小问题:cant connect to MYSQL server on localhost
- 公交换乘系统c语言,公交换乘的简单实现(源码)
- easyui 调用dialog中的方法_SolidWorks中标准件库的创建及调用方法
- foreach 循环达到条件的第一次就停止_是否应该停止在JavaScript代码中使用forEach()?...