可編輯表格（基於 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]已經定義。