直接上代码: <template> <el-form ref="tableDataForm" :model="formData"> <el-table :data="formData.tableDataAdd" border style="width: 100%; margin-top: 20px" > <el-table-column label="日期" width="170" prop="defDate" align="center" header-align="center"> <template slot-scope="scope"> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.beginTime'" :rules="rowRules.beginTime"> <el-date-picker @change="weekChange(scope.row)" format="yyyy第WW周" v-model="scope.row.beginTime" size="small" type="week"> </el-date-picker> </el-form-item> </template> </el-table-column> <el-table-column label="车间名称" width="150" prop="workShopName" align="center" header-align="center"> </el-table-column> <el-table-column label="0.5μm标准值" width="150" prop="standardValueMin" align="center" header-align="center"> <template slot-scope="scope"> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.standardValueMin'" :rules="rowRules.standardValueMin"> <el-input clearable v-model="scope.row.standardValueMin"> </el-input> </el-form-item> </template> </el-table-column> <el-table-column label="0.5μm监测值" width="150" prop="monitoringValueMin" align="center" header-align="center"> <template slot-scope="scope"> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.monitoringValueMin'" :rules="rowRules.monitoringValueMin"> <el-input clearable v-model="scope.row.monitoringValueMin"> </el-input> </el-form-item> </template> </el-table-column> <el-table-column label="5μm标准值" width="150" prop="standardValueMax" align="center" header-align="center"> <template slot-scope="scope"> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.standardValueMax'" :rules="rowRules.standardValueMax"> <el-input clearable v-model="scope.row.standardValueMax"> </el-input> </el-form-item> </template> </el-table-column> <el-table-column label="5μm监测值" width="150" prop="monitoringValueMax" align="center" header-align="center"> <template slot-scope="scope"> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.monitoringValueMax'" :rules="rowRules.monitoringValueMax"> <el-input clearable v-model="scope.row.monitoringValueMax"> </el-input> </el-form-item> </template> </el-table-column> <el-table-column label="气压监测值" width="150" prop="pressureStandardValue" align="center" header-align="center"> <template slot-scope="scope"> <div v-if="scope.row.workShopName === '电子材料库'"> {{scope.row.pressureStandardValue}} </div> <div v-else> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.pressureStandardValue'" :rules="rowRules.pressureStandardValue"> <el-input clearable v-model="scope.row.pressureStandardValue"> </el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column label="温度上限" width="150" prop="temperatureUpperLimit" align="center" header-align="center"> <template slot-scope="scope"> <div v-if="scope.row.workShopName === '电子材料库'"> </div> <div v-else> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.temperatureUpperLimit'" :rules="rowRules.temperatureUpperLimit"> <el-input clearable v-model="scope.row.temperatureUpperLimit"> </el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column label="温度下限" width="150" prop="temperatureLowerLimit" align="center" header-align="center"> <template slot-scope="scope"> <div v-if="scope.row.workShopName === '电子材料库'"> </div> <div v-else> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.temperatureLowerLimit'" :rules="rowRules.temperatureLowerLimit"> <el-input clearable v-model="scope.row.temperatureLowerLimit"> </el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column label="湿度上限" width="150" prop="humidityUpperLimit" align="center" header-align="center"> <template slot-scope="scope"> <div v-if="scope.row.workShopName === '电子材料库'"> </div> <div v-else> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.humidityUpperLimit'" :rules="rowRules.humidityUpperLimit"> <el-input clearable v-model="scope.row.humidityUpperLimit"> </el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column label="湿度下限" width="150" prop="humidityLowerLimit" align="center" header-align="center"> <template slot-scope="scope"> <div v-if="scope.row.workShopName === '电子材料库'"> </div> <div v-else> <el-form-item style="margin-bottom: 0px" :prop="'tableDataAdd.' + scope.$index + '.humidityLowerLimit'" :rules="rowRules.humidityLowerLimit"> <el-input clearable v-model="scope.row.humidityLowerLimit"> </el-input> </el-form-item> </div> </template> </el-table-column> </el-table> </el-form>
</template>
<script>
export default {
data () {
const validInteger = (rule, value, callback) => { let r = /^\+?[1-9][0-9]*$/; //正整数 if (!r.test(value)) { callback(new Error('不是整数')) } else { callback() } }
return {
formData: { tableDataAdd: [ { actualOneData: null, } ], },
rowRules: { beginTime: [ { required: true, message: '必填项', trigger: 'change' }, ], lineName: [ { required: true, message: '必填项', trigger: 'change' }, ], actualOneData: [ { required: true, validator: validInteger, trigger: 'change' }, ], },
} }
}
</script>