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

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

数据绑定：

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

表格校验：

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

// 伪代码，仅为阐述思路 <Form ref="formValidate" :model="formModel.tableModel"> <Table> <Row> <Col> <FormItem prop="table.0.name"> <Input v-model="formModel.table[0].name"></Input> </FormItem> </Col> <Col> <FormItem prop="table.0.remark"> <Input v-model="formModel.table[0].remark"></Input> </FormItem> </Col> </Row> <Row> <Col> <FormItem prop="table.1.name"> <Input v-model="formModel.table[1].name"></Input> </FormItem> </Col> <Col> <FormItem prop="table.1.remark"> <Input v-model="formModel.table[1].remark"></Input> </FormItem> </Col> </Row> </Table> </Form> // ... data () { return { formModel: {tableModel:{}} } }

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