iView表格行验证问题

需求：

    在表格里面添加文本框校验，这里面只添加了姓名和用户名的校验（1、必填，2、只能输入大小写字母 + 数字 + / + ：+ _ + . + - + \）

解决思路：

      将表格嵌套在form表单里面，然后在输入框的位置使用FormItem，将验证规则直接写在FormItem标签上，这里面的prop属性里面绑定的值必须是data（表格绑定的数据）.index（表格行的下标）.name（v-model的值）

代码：

　　可在官网的Demo里做示例实验。地址

<template>
	<Form :model="formModel" ref="formModelRef">
		<Table :columns="columns" :data="formModel.data">
		<template slot-scope="{ row, index }" slot="name">
			<FormItem
			v-if="editIndex === index"
			:prop="'data.' + index + '.name'"
			:rules="[{ required: true, message: '必填项', trigger: 'blur' },{ pattern: '(^[a-zA-Z0-9_:\.\\/-]+$)', message: '输入有误', trigger: 'blur' }]"
			>
			<Input type="text" v-model="formModel.data[index].name" />
			</FormItem>
			<span v-else>{{ row.name }}</span>
		</template>

		<template slot-scope="{ row, index }" slot="age">
			<FormItem
			v-if="editIndex === index"
			:prop="'data.' + index + '.age'"
			:rules="[{ required: true, message: '必填项', trigger: 'blur' },{ pattern: '(^[a-zA-Z0-9_:\.\\/-]+$)', message: '输入有误', trigger: 'blur' }]"
			>
			<Input type="text" v-model="formModel.data[index].age" />
			</FormItem>
			<span v-else>{{ row.age }}</span>
		</template>

		<template slot-scope="{ row, index }" slot="birthday">
			<Input type="text" v-model="editBirthday" v-if="editIndex === index" />
			<span v-else>{{ getBirthday(row.birthday) }}</span>
		</template>

		<template slot-scope="{ row, index }" slot="address">
			<Input type="text" v-model="editAddress" v-if="editIndex === index" />
			<span v-else>{{ row.address }}</span>
		</template>

		<template slot-scope="{ row, index }" slot="action">
			<div v-if="editIndex === index">
			<Button @click="handleSave(index)">保存</Button>
			<Button @click="editIndex = -1">取消</Button>
			</div>
			<div v-else>
			<Button @click="handleEdit(row, index)">操作</Button>
			</div>
		</template>
		</Table>
	</Form>
</template>
<script>
export default {
	data() {
		return {
		columns: [
			{
			title: "姓名",
			slot: "name"
			},
			{
			title: "用户名",
			slot: "age"
			},
			{
			title: "出生日期",
			slot: "birthday"
			},
			{
			title: "地址",
			slot: "address"
			},
			{
			title: "操作",
			slot: "action"
			}
		],
		formModel: {
			data: [
			{
				name: "王小明",
				age: "18",
				birthday: "919526400000",
				address: "北京市朝阳区芍药居"
			},
			{
				name: "张小刚",
				age: "25",
				birthday: "696096000000",
				address: "北京市海淀区西二旗"
			},
			{
				name: "李小红",
				age: "30",
				birthday: "563472000000",
				address: "上海市浦东新区世纪大道"
			},
			{
				name: "周小伟",
				age: "26",
				birthday: "687024000000",
				address: "深圳市南山区深南大道"
			}
			]
		},
		editIndex: -1, // 当前聚焦的输入框的行数
		editName: "", // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
		editAge: "", // 第二列输入框
		editBirthday: "", // 第三列输入框
		editAddress: "" // 第四列输入框
		};
	},
	methods: {
		handleEdit(row, index) {
		this.editIndex = index;
		},
		handleSave(index) {
		this.$refs.formModelRef.validate(valid => {
			if (valid) {
			this.editIndex = -1;
			}
		});
		},
		getBirthday(birthday) {
		const date = new Date(parseInt(birthday));
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${year}-${month}-${day}`;
		}
	}
};
</script>