iview中嵌套input的方法根据iview版本的不同有两种写法,一种是render
,一种是template
。如果当前行有操作可以直接通过change
,获取当前行row
。然而,对于input这种组件,习惯于双向绑定的我们,如何使修改后的支直接作用到table上的data属性里呢?请看demo示例:
<template>
<div>
<Table class="data-manage-table"
border
:disabled-hover="true"
:columns="columns"
:data="datalist">
<template slot-scope="{ row, index }" slot="name">
<Input v-model="datalist[index]['name']"/>
</template>
<template slot-scope="{ row, index }" slot="sex">
<Input v-model="datalist[index]['sex']"/>
</template>
</Table>
<Button type="success" @click="submit">提交</Button>
</div>
</template>
<script>
export default {
name: 'meeting',
data () {
return {
columns: [
{ winWidth: 120, align: 'center', title: '地址', key: 'address' },
{ winWidth: 80, align: 'center', title: '姓名', slot: 'name' },
{ winWidth: 80, align: 'center', title: '性别', slot: 'sex' }
],
datalist: [
{ address: '上海', name: '', sex: '' }
]
}
},
methods: {
submit () {
console.log(this.datalist);
}
}}
</script>