vue结合iview组件实现可编辑表格

功能需求：

vue结合iview组件实现可编辑表格，便于实时批量保存数据（本例开发适用于薪资报表录入场景）。

 实现效果：

 

相关知识点：ref 引用、slot 插槽

更多样例参考此地址：https://dev.iviewui.com/articles/1040179759335739392

代码片段：

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];
        //逻辑处理......
    }