正文
iview之——table中嵌套input、select等
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用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 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 ]);
23 }
由文档得知，table组件提供一个api：render函数，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
参数解读：
h: vue Render函数的别名（全名 createElement）即 Render函数
params： table 该行内容的对象
props：设置创建的标签对象的属性
style：设置创建的标签对象的样式
on：为创建的标签绑定事件
所以代码中的render函数，即创建的一个div中包裹一个button按钮，同时给button设置了相关属性和绑定事件
那么如下图又该如何实现呢：
代码如下：
<template>
<div class="meeting">
<Table border :columns="columns" :data="data" :height="tableHeight"></Table>
</div>
</template>
<script>
export default {
name: "meeting",
data() {
let t = this
return {
tableHeight:'550',
columns: [
{
title: '责任人',
key: 'associated',
width: 100,
align: 'center',
},
{
title: '预计工时',
key: 'attendee',
width: 100,
align: 'center',
render:(h,params) => {
return h('Input',{
props: {
value:'',
size:'small',
},
on: {
input: (val) => {
t.data[params.index].estimateTime = val
}
},
})
}
},
{
title: '实际工时',
key: 'state',
width: 100,
align: 'center',
render:(h,params) => {
return h('Input',{
props: {
value:'',
size:'small',
},
on: {
input: (val) => {
t.data[params.index].actualTime = val
}
}, })
}
},
{
title: 'WorkHover状态',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('Select',{
props:{
},
on: {
'on-change':(event) => {
this.data[params.index].volumeType = event;
}
},
},
params.row.action.map((item) =>{
return h('Option', {
props: {
value: item.value,
label: item.name
}
})
})
)
}
}, ],
data: [
{
associated: '123',
action:[
{
value:0,
name:'select A'
},
{
value:1,
name:'select B'
},
]
},
{
associated: '123',
action:[
{
value:0,
name:'select A'
},
{
value:1,
name:'select B'
},
]
},
],
}
},
methods: {}
};
</script>
讲解：
这里是在table组件中嵌入了iview的input和select组件
值得注意的是，1、on是table的触发事件，不是table内嵌套组件的触发事件，2、对于select组件，通过map函数就可以代替v-for的渲染（注：如果数据中的value值为空，select将不被渲染）
