table 里输入rules 验证

HTML

<el-form ref='from' :model="fromData">

<el-table ref="tableman"

border

v-loading='loading'

empty-text="没有相关数据"

max-height="400"

size="mini"

:data="fromData.domains"

align="left"

highlight-current-row

@selection-change="MaterilsChange"

:showOverflowTooltip="true"

style="min-width: 100%;min-height:100px;">

<el-table-column type="selection"

align="center"

width="55">

</el-table-column>

<el-table-column v-for="(item,index) in Materilscolumn"

:key="index"

:label="item.label"

align="center"

:prop="item.prop"

:min-width="item.minWidth">

</el-table-column>

<!--输入数量栏-->

<el-table-column label="数量"

align="center"

:min-width="90">

<template slot-scope="scope">

<el-form-item :prop="'domains.'+scope.$index+'.num'" :rules="fromaDataRules.num">

<el-input v-model="scope.row.num" @change='inputchange(scope.row,scope.$index)'></el-input>

</el-form-item>

</template>

 

</el-table-column>

</el-table>

<!-- 底部操作栏 -->

</el-form>

 

 

 

script

<script>

export default {

data() {

return {

dialogFormVisible:false,

fromData:{

domains:undefined

},

fromaDataRules:{

name:[{ required: true, message: '请输入活动名称', trigger: 'blur' },{validator:(rule, value, callback) =>{

let reg = /^[0-9]*$/

console.log(value)

if(!reg.test(value)){

callback(new Error('数量应为数字'));

}else if(value==0){

callback(new Error('数量应大于0'));

}else{

callback()

}

},trigger: 'blur'},],

desc:[ { required: true, message: '请填写活动形式', trigger: 'blur' }]

},

domains:[],

}

},

mounted(){

this.initDomains()

},

methods:{

initDomains(){

this.domains=[

{

name: undefined,

desc: undefined

},

{

name:undefined,

desc:undefined

}

]

},

init(){

this.dialogFormVisible = true

this.$set(this.fromData,'domains',this.domains)

},

submit(formName){

this.$refs[formName].validate((valid) => {

if (valid) {

alert('submit!');

} else {

console.log('error submit!!');

return false;

}

});

}

}

}

</script>

 

https://blog.csdn.net/xiaojun081004/article/details/82988549