使用iview在table中嵌入button是比较常见的需求，但是在table中嵌入input或者select你是否考虑过呢？本文用实例介绍input和select在table中的嵌套。
理解table如何嵌套input、select首先要理解vue的render函数可以参考：vue render函数介绍。当然，不理解直接Ctrl + C也是可以使用的 ^_^
在iview的官方文档中，table插入Button的例子如下：
1 {
2 title: 'Action',
3 key: 'action',
4 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 ]);
23 }
由文档得知，table组件提供一个api：render函数，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
参数解读：
h: vue Render函数的别名（全名 createElement）即 Render函数
params： table 该行内容的对象
props：设置创建的标签对象的属性
style：设置创建的标签对象的样式
on：为创建的标签绑定事件
所以代码中的render函数，即创建的一个div中包裹一个button按钮，同时给button设置了相关属性和绑定事件
那么如下图又该如何实现呢：
代码如下：
1 <template> 2 <div class="meeting"> 3 <Table border :columns="columns" :data="data" :height="tableHeight"></Table> 4 </div> 5 </template>
1 <script> 2 export default { 3 name: "meeting", 4 data() {
let t = this 5 return { 6 tableHeight:'550', 7 columns: [ 8 { 9 title: '责任人', 10 key: 'associated', 11 100, 12 align: 'center', 13 }, 14 { 15 title: '预计工时', 16 key: 'attendee', 17 100, 18 align: 'center', 19 render:(h,params) => { 20 return h('Input',{ 21 props: { 22 value:'', 23 size:'small', 24 }, 25 on: { 26 input: (val) => { 27 t.data[params.index].estimateTime = val 28 } 29 }, 30 }) 31 } 32 }, 33 { 34 title: '实际工时', 35 key: 'state', 36 100, 37 align: 'center', 38 render:(h,params) => { 39 return h('Input',{ 40 props: { 41 value:'', 42 size:'small', 43 }, 44 on: { 45 input: (val) => { 46 t.data[params.index].actualTime = val 47 } 48 }, 49 50 }) 51 } 52 }, 53 { 54 title: 'WorkHover状态', 55 key: 'action', 56 150, 57 align: 'center', 58 render: (h, params) => { 59 return h('Select',{ 60 props:{ 61 }, 62 on: { 63 'on-change':(event) => { 64 this.data[params.index].volumeType = event; 65 } 66 }, 67 }, 68 params.row.action.map((item) =>{ 69 return h('Option', { 70 props: { 71 value: item.value, 72 label: item.name 73 } 74 }) 75 }) 76 ) 77 } 78 }, 79 80 ], 81 data: [ 82 { 83 associated: '123', 84 action:[ 85 { 86 value:0, 87 name:'select A' 88 }, 89 { 90 value:1, 91 name:'select B' 92 }, 93 ] 94 }, 95 { 96 associated: '123', 97 action:[ 98 { 99 value:0, 100 name:'select A' 101 }, 102 { 103 value:1, 104 name:'select B' 105 }, 106 ] 107 }, 108 ], 109 } 110 }, 111 methods: {} 112 }; 113 </script>
讲解：
这里是在table组件中嵌入了iview的input和select组件
值得注意的是，1、on是table的触发事件，不是table内嵌套组件的触发事件，2、对于select组件，通过map函数就可以代替v-for的渲染（注：如果数据中的value值为空，select将不被渲染）