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

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

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

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

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

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

[javascript] view plain copy

  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 plain copy

  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

  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

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

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

这是我们的最终结果：

[javascript] view plain copy

  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

发表评论

表情：
评论列表 （有 0 条评论，568人围观）

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

相关阅读