在iview的Table中添加Select(render)

首先对Render进行分析,在iview官方的文档中,找到了table插入Button的例子:

 

[javascript] view plaincopy
  1. {  
  2. title: 'Action',  
  3. key: 'action',  
  4. width: 150,  
  5. align: 'center',  
  6. render: (h, params) => {  
  7.     return h('div', [  
  8.         h('Button', {  
  9.             props: {  
  10.                 type: 'primary',  
  11.                 size: 'small'  
  12.             },  
  13.             style: {  
  14.                 marginRight: '5px'  
  15.             },  
  16.             on: {  
  17.                 click: () => {  
  18.                     this.show(params.index)  
  19.                 }  
  20.             }  
  21.         }, 'View'),  
  22.         h('Button', {  
  23.             props: {  
  24.                 type: 'error',  
  25.                 size: 'small'  
  26.             },  
  27.             on: {  
  28.                 click: () => {  
  29.                     this.remove(params.index)  
  30.                 }  
  31.             }  
  32.         }, 'Delete')  
  33.     ]);  
  34. }  

这是Table的表头定义中的一段,意思是创建两个按钮,一个名为View,一个名为Delete,在疑惑h是什么的时候,看到网上一哥们的回答顿时茅厕顿开,问题地址,render参数中h可以看做是 createElement。可以看出上面的例子大概表现为一个div中包含两个Button,又根据生成Button的结构可以把这段代码简化一下,写为:

 

 

[javascript] view plaincopy
  1. render: (h, params) => {  
  2.     return h('Button', {  
  3.             props: {  
  4.                 type: 'primary',  
  5.                 size: 'small'  
  6.             },  
  7.             style: {  
  8.                 marginRight: '5px'  
  9.             },  
  10.             on: {  
  11.                 click: () => {  
  12.                     this.show(params.index)  
  13.                 }  
  14.             }  
  15.         }, 'View'),  
  16.     );  
  17. }  

在学vue的时候,有看到父组件和子组件之间的交互使用了props,我们在iview的文档中,看到Button的API包括type、size,由此可知,props可以直接声明子组件的API值内容,on中写的自然就是它的触发事件了。

 

好,现在开始写Table组件中的Select组件:

 

[javascript] view plaincopy
  1. render: (h, params) => {  
  2.     return h('Select', {  
  3.         props:{  
  4.             value: this.data[params.index].volumeType,  
  5.         },  
  6.         on: {  
  7.             'on-change':(event) => {  
  8.                 this.data[params.index].volumeType = event;  
  9.             }  
  10.         },  
  11.     },  
  12.     [  
  13.         h('Option',{  
  14.             props: {  
  15.                 value: '1'  
  16.             }  
  17.         },'option1'),  
  18.         h('Option',{  
  19.             props: {  
  20.                 value: '2'  
  21.             }  
  22.         },'option2')  
  23.     ]  
  24.     );  
  25. },  

可以看到效果:

 

好,现在我们实现了基本的渲染。现在我们实现动态改变option的内容,与组件的data结合起来,毕竟当数据量大的时候,总不能一个一个的写上去。

观察render的第三个参数为一个对象数组,我们可不可以使用便利数据数组的方式生成呢?(废话)

直接上代码,在数组的地方写入:

 

[javascript] view plaincopy
  1. this.volumeTypes.map(function(type){  
  2.     return h('Option', {  
  3.         props: {value: type}  
  4.     }, type);  
  5. })  


其中,this.volumeTypes就是我们的列数据,当然,这是最基本的绑定的写法,如果想使用对象数组,自行研究,很easy的~

 

这是我们的最终结果:

 

[javascript] view plaincopy
  1. {  
  2.     title: '卷类型',  
  3.     key: 'volumeType',  
  4.     align: 'center',  
  5.     render: (h, params) => {  
  6.         return h('Select', {  
  7.             props:{  
  8.                 value: this.data[params.index].volumeType,  
  9.             },  
  10.             on: {  
  11.                 'on-change':(value) => {  
  12.                     this.data[params.index].volumeType = value;  
  13.                 }  
  14.             },  
  15.         },  
  16.         this.volumeTypes.map(function(type){  
  17.             return h('Option', {  
  18.                 props: {value: type}  
  19.             }, type);  
  20.         })  
  21.         );  
  22.     },  
  23. },    


end。

转载于:https://www.cnblogs.com/liubingboke/p/8745518.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工业机械人运动学正逆解,简单粗暴!!!!!!

ur机械臂是六自由度机械臂,由D-H参数法确定它的运动学模型,连杆坐标系的建立如上图所示。 转动关节θi是关节变量,连杆偏移di是常数。 关节编号 α(绕x轴) a(沿x轴) θ(绕z轴&am…

python opencv立体测距 立体匹配BM算法

立体标定应用标定数据转换成深度图标定 在开始之前,需要准备的当然是两个摄相头,根据你的需求将两个摄像头进行相对位置的固定,我是按平行来进行固定的(如果为了追求两个双目图像更高的生命度,也可以将其按一定钝角固…

Vue基础学习(一)------内部指令

一.v-if v-else v-show 指令 1.v-if v-if:是vue 的一个内部指令,指令用在我们的html中,用来判断是否加载html的DOM 现在举个栗子,判断用户的登录操作,用isLogin作为一个判断字段,登录成功,就显示用户的名称 代码&…

StereoRectify()函数定义及用法畸变矫正与立体校正

畸变矫正是上一篇博文的遗留问题,当畸变系数和内外参数矩阵标定完成后,就应该进行畸变的矫正,以达到消除畸变的目的,此其一。 在该系列第一部分的博文中介绍的立体成像原理中提到,要通过两幅图像估计物点的深度信息&a…

死磕 java集合之TreeMap源码分析(三)- 内含红黑树分析全过程

2019独角兽企业重金招聘Python工程师标准>>> 欢迎关注我的公众号“彤哥读源码”,查看更多源码系列文章, 与彤哥一起畅游源码的海洋。 删除元素 删除元素本身比较简单,就是采用二叉树的删除规则。 (1)如果删除的位置有两…

四元素理解

旋转变换_四元数 2017年03月29日 11:59:38 csxiaoshui 阅读数:5686 1.简介 四元数是另一种描述三维旋转的方式,四元数使用4个分量来描述旋转,四元数的描述方式如下: qsxiyjzk,(s,x,y,z∈ℝ)i2j2k2ijk−1 四元数的由…

31、SAM文件中flag含义解释工具--转载

转载:http://www.cnblogs.com/nkwy2012/p/6362996.html SAM是Sequence Alignment/Map 的缩写。像bwa等软件序列比对结果都会输出这样的文件。samtools网站上有专门的文档介绍SAM文件。具体地址:http://samtools.sourceforge.net/SAM1.pdf很多人困惑SAM文…

《Head First设计模式》批注系列(一)——观察者设计模式

最近在读《Head First设计模式》一书,此系列会引用源书内容,但文章内容会更加直接,以及加入一些自己的理解。 观察者模式(有时又被称为模型-视图(View)模式、源-收听者(Listener)模式或从属者模式&#xff…

PYPL 4 月排行:Python 最流行,Java 还行不行?

开发四年只会写业务代码,分布式高并发都不会还做程序员? PYPL 发布了 4 月份的编程语言排行榜。 前五的分别是:Python、Java、Javascript、C# 和 PHP。可以看到,榜单没有什么大变化,但是相比去年 4 月份,…

顺序表

一、数据是如何在内存中存储的? 32位系统中char,int型数据在内存中的存储方式: char占1byte(8bit)int占4byte(32bit)假设我们有一个int类型的值,它从0x01开始,一个int占据…

四元素的真面目..........简单粗暴

作者:Yang Eninala 链接:https://www.zhihu.com/question/23005815/answer/33971127 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 根据我的理解,大多数人用汉密尔顿四元数就只…

Linemod;理解

Linemod 代码笔记 2019年03月11日 16:18:30 haithink 阅读数:197 最近了解到 Linemod 这个模板匹配算法,印象不错 准备仔细学习一下,先做点代码笔记,免得后面不好回顾 目前的笔记基本上把 核心流程都分析得比较清楚了&#xff0…

手眼标定

Eye-in-hand和Eye-to-hand问题求解和实验 2018年12月07日 00:00:40 百川木易 阅读数 3018 2018/12/5 By Yang Yang(yangyangipp.ac.cn) 本文所有源码和仿真场景文件全部公开,点击Gitee仓库链接。 文章目录 问题描述Eye-in-hand问题求解公式…

RNN总结

RNN既可以表述为循环神 经网络(recurrent neural network),也可以表述为递归神经网络(recursive neural network),前者一般用于处理以时间序列为输入的问题(比如把一个句子看成词组成的序列&…

linux硬链接与软链接

Linux 系统中有软链接和硬链接两种特殊的“文件”。 软链接可以看作是Windows中的快捷方式,可以让你快速链接到目标档案或目录。 硬链接则透过文件系统的inode来产生新档名,而不是产生新档案。 创建方法都很简单: 软链接(符号链接…

企业级区块链现状研究报告:小企业的投资总额是大企业的28倍

根据企业级区块链现状研究报告表明,当前企业采用区块链技术的势头正在逐步增强。参与该报告的企业表示,区块链投资今年共增长了 62% ,预计到 2025 年区块链将成为主流技术。其中,有 28% 的企业正在积极开展区块链发展计划。现在看…

特征匹配

Python 使用Opencv实现图像特征检测与匹配 2018-06-13 11:36:58 Xy-Huang 阅读数 19203更多 分类专栏: Python 人工智能 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接…

bzoj 1015 并查集

代码&#xff1a; //这题可以反着想&#xff0c;把要去掉的点倒着处理变成往图中一个一个的加点&#xff0c;然后用并查集处理联通快就好了。 #include<iostream> #include<cstdio> #include<cstring> #include<vector> using namespace std; const in…

画极线

OpenCV学习日记5 2017-05-27 10:44:35 1000sprites 阅读数 2339更多 分类专栏&#xff1a; 计算机视觉 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a;https://blog.cs…

最近很火的MySQL:抛开复杂的架构设计,MySQL优化思想基本都在这

优化一览图 优化 笔者将优化分为了两大类&#xff1a;软优化和硬优化。软优化一般是操作数据库即可&#xff1b;而硬优化则是操作服务器硬件及参数设置。 1、软优化 1&#xff09;查询语句优化 首先我们可以用EXPLAIN或DESCRIBE(简写:DESC)命令分析一条查询语句的执行信息。 例…