<template> <div class='edit-box'> <el-form ref='form' :rules='rules' :model='form' label-width='140px'> <!-- <el-form-item v-if='devFlag' label='对象标识' prop='EquipmentMark'> <el-input v-model='form.EquipmentMark'></el-input> </el-form-item> --> <ul class='point-box'> <span class='left'>如果</span> <span class='right'>那么</span> <li v-for='(item,index) in form.pointArr' :key='index'> <p> <el-form-item label='原始点位值' :prop='"pointArr." + index + ".from"' :rules='{ required: true, message: "不能为空", trigger: "blur" }' > <el-input v-model='item.from'></el-input> </el-form-item> </p> <p> <el-form-item label='转换为标准值' :prop='"pointArr." + index + ".to"' :rules='{ required: true, message: "不能为空", trigger: "blur" }'> <el-input v-model='item.to'></el-input> </el-form-item> <i v-if='index > 0' class='el-icon-delete delete' @click='deleteRow(index)'></i> </p> </li> </ul> </el-form> <div class='add-btn-box'> <el-button type='primary' @click='addRules'>+添加新转换规则</el-button> </div> </div> </template> <script> export default { name: 'step3_auto-handle', data() { return { form: { EquipmentMark: '', pointArr: [{ from: '', to: '' }] }, rules: { // EquipmentMark: [{ required: true, message: '请输入对象标识', trigger: 'blur' }] } } }, props: { devFlag: { default: true, type: Boolean }, enumHandleShow:{} }, methods: { getForm(cb) { this.$refs['form'].validate(valid => { if (valid) { cb(this.form) } else { cb(false) } }) }, addRules() { this.form.pointArr.push(this.newRules()) }, newRules() { return { from: '', to: '' } }, deleteRow(index) { this.form.pointArr.splice(index, 1) } }, watch:{ enumHandleShow: { deep: true, immediate: true, handler(val) { if(val) { this.form = JSON.parse(JSON.stringify(val)) } } } } } </script> <style scoped lang='scss'> .edit-box { padding: 20px 0; .tip { color: #ccc; } .point-box { margin-top: 45px; position: relative; width: 500px; .left, .right { font-size: 20px; background: #fff; } .left { position: absolute; top: -35px; left: 23px; margin: 0; padding: 0; } .right { position: absolute; top: -35px; left: 260px; margin: 0; padding: 0 } li { display: flex; justify-content: space-between; margin-top: 5px; position: relative; p { .name { padding-left: 40px; } .value { margin-left: 10px; display: inline-block; width: 80px; } } .delete { top: 5px; right: -20px; cursor: pointer; position: absolute; z-index: 99999; } } } .add-btn-box { margin-top: 20px; text-align: center; } } </style>