功能需求：
vue结合iview组件实现可编辑表格，便于实时批量保存数据（本例开发适用于薪资报表录入场景）。
实现效果：
代码片段：
html:
<Table size="small" ref="myTable" border :columns="columns" :data="data" :span-method="handleSpan">
<template slot="number" slot-scope="props">
<InputNumber v-model="props.row.number" @on-change="getValue(props.row._index)" @on-blur="valueChange(props.row._index)">
</InputNumber>
</template>
<template slot="hasInvoice" slot-scope="props">
<RadioGroup v-model="props.row.hasInvoice" @on-change="changeRadio(props.row._index)">
<Radio :label="1">是</Radio>
<Radio :label="0">否</Radio>
</RadioGroup>
</template>
<template slot="remarks" slot-scope="props">
<Input type="textarea" :rows="1" v-model="props.row.remarks" @on-change="getValue(props.row._index)" @on-blur="textChange(props.row._index)" />
</template>
</Table>script:
export default {
data() {
return {
data: [ { number: 0, hasInvoice: 1, remarks: ""} ],
columns: [
{
title: '数量',
key: 'number',
render: (h, params) => {
this.data[params.index] = params.row
return h(
'div',
this.$refs.myTable.$scopedSlots.number({
row: params.row,
idx: params.row._index
})
)
}
},
{
title: '提供发票',
key: 'hasInvoice',
width: 100,
render: (h, params) => {
this.data[params.index] = params.row;
return h(
'div',
this.$refs.myTable.$scopedSlots.hasInvoice({
row: params.row,
idx: params.row._index
})
)
}
},
{
title: '备注',
key: 'remarks',
width: 220,
render: (h, params) => {
this.data[params.index] = params.row;
return h(
'div',
this.$refs.myTable.$scopedSlots.remarks({
row: params.row,
idx: params.row._index
})
)
}
}
]
}
},methods:
//数值改变时的回调，返回当前值
getValue(index) {
this.form = this.data[index];
//逻辑处理......
},
//失焦时触发,用于实时保存
valueChange(index) {
this.form = this.data[index];
//逻辑处理......
}
