如何在iview中使用rander函数渲染Select组件和input组件

超、凢脫俗 2021-09-15 00:40 485阅读 0赞

转自：http://blog.csdn.net/dead\_rabbit6\_0/article/details/79239206

仅用于学习，违者必究！！！

iview的新手文档写的并不怎么样，把锅都推给了vue，这一天的工作卡在了在Table中加入Select的问题上，再次记录学习过程：

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

**\[javascript\]** [view plain][] [copy][view plain]

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是什么的时候，看到网上一哥们的回答顿时茅厕顿开，[问题地址][Link 1]，render参数中h可以看做是 createElement。可以看出上面的例子大概表现为一个div中包含两个Button，又根据生成Button的结构可以把这段代码简化一下，写为：

**\[javascript\]** [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

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. \},

可以看到效果：![SouthEast][]

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

观察render的第三个参数为一个对象数组，我们可不可以使用便利数据数组的方式生成呢？（废话）

直接上代码，在数组的地方写入：

**\[javascript\]** [view plain][] [copy][view plain]

1.  **this**.volumeTypes.map(**function**(type)\{  
2.      **return** h('Option', \{  
3.          props: \{value: type\}  
4.      \}, type);  
5.  \})

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

这是我们的最终结果：

**\[javascript\]** [view plain][] [copy][view plain]

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':(event) => \{  
12.                     **this**.data\[params.index\].volumeType = event;  
13.                 \}  
14.             \},  
15.         \},  
16.         **this**.volumeTypes.map(**function**(type)\{  
17.             **return** h('Option', \{  
18.                 props: \{value: type\}  
19.             \}, type);  
20.         \})  
21.         );  
22.     \},  
23. \},

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

以下是本人的代码，仅供参考

![format_png][]

效果如下：

![format_png 1][]

渲染input组件：

![format_png 2][]

[view plain]: http://blog.csdn.net/dead_rabbit6_0/article/details/79239206#
[Link 1]: https://segmentfault.com/q/1010000007130348
[SouthEast]: /images/20210813/1c4c2e8362ea4ec1bf99fa0fcac6387c.png
[format_png]: /images/20210813/df723d8753b641ccba7a2249cb66bbc1.png
[format_png 1]: /images/20210813/15d3db8e6cfb4bf5ad013c9aa44ece3e.png
[format_png 2]: /images/20210813/ae495eb0582f4b62851e25fea2658f01.png

发表评论取消回复

表情：

评论列表（有 0 条评论，485人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-plus input组件+select组件实现输入加选择

需求用户输入数值，再选择下拉项，进行相应数据的筛选查询 ![在这里插入图片描述][79a73a8631d74fd0abf1dde7699633fc.png] 组

野性酷女/ 2024年04月01日 18:50/ 0 赞/ 97 阅读

相关如何在vue项目中引入element ui组件以及如何引入iview组件

前言建议都在已经建立好的vue项目的基础上，再引入element ui或iview组件，而不是按照element ui或iview的官方网站进行，那样一般会存在很多设置

短命女/ 2022年12月29日 06:59/ 0 赞/ 210 阅读

相关在 html 中如何使用 plyr 组件

文章目录前言一、Plyr 是什么？二、使用步骤 1.引入库 css

Dear 丶/ 2022年11月18日 10:55/ 0 赞/ 223 阅读

相关 bootstrap select组件

一、组件开源地址以及API说明 bootstrap-select开源地址：[https://github.com/silviomoreto/bootstrap-select

快来打我*/ 2022年06月01日 13:08/ 0 赞/ 251 阅读

相关 vue-select 组件

场景解决参考文档安装用法场景 . vue组件

朴灿烈づ我的快乐病毒、/ 2022年05月20日 01:58/ 0 赞/ 501 阅读

相关在Vue中封装一个select组件

我们使用iview封装一个select组件 ![这里写图片描述][70] 封装的是每一个select下拉框 <div class='iselect'> <!-

墨蓝/ 2022年05月19日 07:42/ 0 赞/ 1143 阅读

相关 iview组件Select使用与回显

数据库存入的是数字，select菜单根据数字显示文字，并且对字段进行改查以及回显 1、编辑页面 <i-select v-model="edit.type" styl

Dear 丶/ 2022年02月19日 14:43/ 0 赞/ 1992 阅读

相关 VUE- iView组件框架的使用

VUE- iView组件框架的使用 1. 下载iView 工程。 ![880909-20190726163634491-1516165653.png][]

╰半橙微兮°/ 2021年10月18日 19:16/ 0 赞/ 395 阅读

相关如何在iview中使用rander函数渲染Select组件和input组件

转自：http://blog.csdn.net/dead\_rabbit6\_0/article/details/79239206 仅用于学习，违者必究！！！

超、凢脫俗/ 2021年09月15日 00:40/ 0 赞/ 486 阅读

相关 iview的Select组件filterable

<FormItem label="国家"> <Select v-model="country" ref="sel" filterable>

比眉伴天荒/ 2021年06月11日 15:14/ 0 赞/ 827 阅读