需求：
验证前两⾏的姓名不能为空；
解决⽅案：
需在<FormItem>前加<Form>标签否则失效；在fules⾥加条件判断那些⾏，需激活校验规则，如果不加判断条件则可全部激活(true)。如需在Input输⼊框前⽅加 * 必填提⽰，则只需在，label内容最好为空字符串。 代码实现：
<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>
</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',
},
{
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.$('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 = FullYear();
const month = Month()+1;
const day = Date();
return`${year}-${month}-${day}`;
}
}
}
</script>
基本效果图：
甘肃政法学院学报
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议