工艺生产

src/views/production/craftsmanship/index.vue

 <template>
-    <el-form ref="form" :model="form" label-width="80px">
-      <el-form-item label="活动区域">
-        <el-select v-model="form.region" placeholder="请选择活动区域" @change="updateTextBoxes">
-          <el-option label="区域一" value="region1"></el-option>
-          <el-option label="区域二" value="region2"></el-option>
-        </el-select>
-      </el-form-item>
-  
-      <el-row v-for="(textbox, index) in form.textboxes" :key="index">
-        <el-col :span="12">
-          <el-form-item :label="'文本框 ' + (index + 1)">
-            <el-input v-model="textbox.value"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        form: {
-          region: 'region1',
-          textboxes: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }]
-        },
-      };
-    },
-    methods: {
-      updateTextBoxes() {
-        if (this.form.region === 'region2') {
-          this.form.textboxes.push({ value: '' }, { value: '' }); // 添加两个额外的文本框
-        } else {
-          this.form.textboxes = this.form.textboxes.slice(0, 4); // 保留四个文本框
-        }
-      },
-    },
-  };
-  </script>
\ No newline at end of file
+  <el-form ref="form" :model="form" label-width="80px" >
+    <el-form-item label="活动区域">
+      <el-select v-model="form.region" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form style="display: flex; flex-wrap: wrap;">
+  <el-form-item label="文本框1" style="flex-basis: 50%;">
+    <el-input ref="input1" v-model="form.name"  @keyup.enter.native="handelTab(1,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+  <el-form-item label="文本框2" style="flex-basis: 50%;">
+    <el-input ref="input2" v-model="form.date1"  @keyup.enter.native="handelTab(2,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+  <el-form-item label="文本框3" style="flex-basis: 50%;">
+    <el-input ref="input3" v-model="form.date2"  @keyup.enter.native="handelTab(3,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+  <el-form-item v-if="form.region === 'beijing'" label="文本框4" style="flex-basis: 50%;">
+    <el-input ref="input4" v-model="form.type"  @keyup.enter.native="handelTab(4,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+  <el-form-item v-if="form.region === 'beijing'" label="文本框5" style="flex-basis: 50%;">
+    <el-input ref="input5" v-model="form.resource"  @keyup.enter.native="handelTab(5,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+  <el-form-item label="文本框6" style="flex-basis: 50%;">
+    <el-input ref="input6" v-model="form.desc"  @keyup.enter.native="handelTab(6,$event)" :style="{ width: '400px', height: '30px' }"></el-input>
+  </el-form-item>
+</el-form>
+<el-form-item style="width: 100%;">
+      <el-button type="primary" @click="submitForm">提交</el-button>
+    </el-form-item>
+  </el-form>
+
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        region: '',
+        name: '',
+        date1: '',
+        date2: '',
+        type: '',
+        resource: '',
+        desc: ''
+      }
+    };
+  },
+  methods: {
+    
+    handelTab(i, e) {
+const that = this
+if (!that.$refs['input' + i]) {
+return
+}
+that.$nextTick(() => {
+e.target.blur()
+const index = i + 1
+that.$refs['input' + index].focus()
+})
+},
+}
+}
+</script>
\ No newline at end of file