<template>
<el-button type="primary" size="small" @click="Submit" >提交</el-button>
<el-form ref="ruleFrom" :rules="form.rules" :model="form">
<el-table ref="mulTable" :data="form.timeTableData" border>
<el-table-column label="月份" prop="Month"/>
<el-table-columnlabel="调增月份">
<template slot-scope="scope">
<el-form-item
:prop="'timeTableData[' + scope.$index + '].increaseMonth'"
:rules="form.rules.increaseMonth"
>
<el-select
v-model="scope.row.increaseMonth"
clearable
filterable
placeholder="请选择"
value
>
<el-option
v-for="(item, i) in changeMonthStr"
:key="i"
:label="item + '月'"
:value="item"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="调减电量"
align="center"
width="220"
:sortable="false"
>
<template slot-scope="scope">
<el-form-item
:prop="
'timeTableData[' + scope.$index + '].reductionElectricity'
"
:rules="form.rules.reductionElectricity"
>
<el-input
v-model="scope.row.reductionElectricity"
size="small"
maxlength="12"
placeholder="必须输入负数"
@change="inputChange(scope.row, scope.$index)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table/>
<el-form/>
</template>
<script>
export default {
data() {
const validateReduction = (rule, value, callback) => {
const r = /^(-([0-9]{1}\d*)|(0{1}))(\.\d{1,3})?$/;
if (r.test(value)) {
if (value === "0") {
callback(new Error("值必须为负数只能保留3位小数"));
} else {
callback();
}
} else {
callback(new Error("值必须为负数只能保留3位小数"));
}
};
return {
form: {
timeTableData: [],
rules: {
reductionElectricity: [{ required: true, trigger: "blur", validator: validateReduction }],
increaseMonth: [{ required: true, message: "请选择月份", trigger: "blur" }],
},
},
}
}
methods:{
Submit(){
this.$refs["ruleFrom"].validate((valid) => {
if (valid) {
}
}
}
}
}
</script>
vue2 表格加表单混用,实现表单校验
最新推荐文章于 2024-04-30 15:49:02 发布