iview ui table表格里嵌入其他组件的方式
<Table
border
:columns="columnsBox"
:data="pointList"
ref="tableA"
:max-height="170"
>
<template
slot="check"
slot-scope="{ row, index }"
>
<Checkbox
@on-change="changeStartS(row, index)"
v-model="selectArray[index]"
></Checkbox>
</template>
<template
slot="sw"
slot-scope="{ index }"
>
<div class="swlswrap">
<!-- 单位更改的 -->
<Input v-model="pointList[index].yjsw"></Input> <span>m</span>
</div>
</template>
<template
slot="ls"
slot-scope="{ index }"
>
<div class="swlswrap">
<Input v-model="pointList[index].ls"></Input> <span>m³/s</span>
</div>
</template>
</Table>
<script>
columnsBox: [
{
title: "起点",
slot: "check",
align: "center",
width: 50,
},
{ title: "站名", key: "dqwz", align: "center", width: 80 },
{ title: "水系", key: "sx", align: "center" },
{ title: "水位", slot: "sw", align: "center" },
{ title: "流量", slot: "ls", align: "center" },
],
</script>
这个是用插槽的方式添加组件
{
title: '午餐选择',
key: 'lunch',
width: 200,
align: 'center',
render: (h, params) => {
return h('Select', {
props:{
value : this.data[params.index].lunch, //数据的双向绑定 data是定义好的数据
transfer: true,
},
on: {
'on-change':(event) => { //select改变事件
this.data[params.index].lunch = event;
}
},
},
this.lunch_array.map(function(val,key){ //lunch_array是午餐的集合数组
return h('Option', {
props:{
value:val.value
}
}, val.text);
})
)
}
},
这个是使用render函数来创建select