在iview的Table中添加Select（render）

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

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的结构可以把这段代码简化一下，写为：

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组件：

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的第三个参数为一个对象数组，我们可不可以使用便利数据数组的方式生成呢？（废话）

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

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

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

这是我们的最终结果：

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。