iView表格行验证问题
iView Table 3.2.0 版本
需求：
验证前两行的姓名不能为空；
解决方案：
判断是否前两行，如是则增加校验规则；
需在<FormItem>前加<Form>标签否则失效；在fules里加条件判断那些行，需激活校验规则，如果不加判断条件则可全部激活(true)。
如需在Input输入框前方加 * 必填提示，则只需在<FormItem label=” “>，label内容最好为空字符串。
代码：
可在官网的Demo里做示例实验。官网示例地址
<template>
<Table :columns="columns" :data="data">
<template slot-scope="{ row, index }" slot="name">
<Form :model="row">
<FormItem prop="name"
:rules="{required: index===0 || index===1 ? true : false, message: 'can not be empty', trigger: 'blur'}">
<Input type="text" v-model="row.name" message="The name cannot be empty" v-if="editIndex === index" />
<span v-else>{{ row.name }}</span>
</FormItem>
</Form>
</template>
<template slot-scope="{ row, index }" slot="age">
<Input type="text" v-model="editAge" v-if="editIndex === index" />
<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>
<FormItem>
<Button type="primary" @click="handleSubmit('data')">Submit</Button>
</FormItem>
</template>
<script>
export default {
data () {
return {
formDynamic: {
items: [
{
value: '22',
index: 0,
status: 1
}
]
},
//ruleValidate:{
// name: [
// {
// required: true,
// max: 5,
// message: '不能为空且不超过5个字',
// trigger: 'blur'
//}]
//},
columns: [
{
title: '姓名',
slot: 'name'
},
{
title: '年龄',
slot: 'age'
},
{
title: '出生日期',
slot: 'birthday'
},
{
title: '地址',
slot: 'address'
},
{
title: '操作',
slot: 'action'
}
],
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: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleEdit (row, index) {
this.editName = row.name;
this.editAge = row.age;
this.editAddress = row.address;
this.editBirthday = row.birthday;
this.editIndex = index;
if (index === 0){
}
},
handleSave (index) {
this.data[index].name = this.editName;
this.data[index].age = this.editAge;
this.data[index].birthday = this.editBirthday;
this.data[index].address = this.editAddress;
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>
效果图：
效果基本实现，但样式还需优化。
版权声明：本文为hemajia原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。