table 里输入rules 验证
2024-08-25 11:06:32
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
最新文章
- SVN使用_获取某版本后改动的文件列表
- [Hadoop in Action] 第4章 编写MapReduce基础程序
- WPF入门教程系列十一——依赖属性（一）
- jsoup简单的爬取网页数据
- Mac OS X中MacPorts安装和使用
- jetBrains phpstorm/webstorm 编辑器使用诀窍
- linux -- 串口调试总结
- C++ 中vector的基本用法
- SGU-495 Kids and Prizes 概率DP
- 【Java】java数据库连接池配置的几种方法
- 延迟N秒执行某个方法
- 在Windows上使用Ubuntu共享的打印机
- [bzoj1301] [LLH邀请赛]参观路线
- 高通android开发摘要
- Storm之路-WordCount-实例
- TensorFlow之DNN（二）：全连接神经网络的加速技巧(Xavier初始化、Adam、Batch Norm、学习率衰减与梯度截断)
- 封装ajax原理
- _ZNote_Qt_添加图标方法
- 利用canvas来绘制一个会动的图画
- dazhewang数据库初设计