可编辑表格（基于vue和iview）的数据绑定问题和校验问题

最近在项目中需要实现一个可编辑表格，要求在多行多列的列表内编辑并保存数据。关于数据绑定和表格校验，起初没什么思路，这里总结一下最终个人的写法：

数据绑定：

行内的每一个输入控件与数据模型这样绑定：v-model = "formModel.tableModel[index][propertyName]"。

表格校验：

FormItem的属性prop设定为"formModel.table[0].name"的格式，iview会解析路径并找到对应的绑定值，最终实现表单校验。

// 伪代码，仅为阐述思路

   	
			
					
				
					
				
			
					
				
					
				


// ...

data () {
    return {
        formModel: {tableModel:{}}
    }
}

FormItem的prop格式可以设定为 'tableName.index.propertyName' 或 'tableName[index].propertyName'，注意直接设定会报错，要在设定之前保证formData.tableName[index]已经定义。