本文介绍如何在 vue3 中为多行表单（如 10 行）实现「每行独立控制」：当用户在某行第一个输入框（input1）中输入任意非空内容时，自动启用该行的第二个文本框（input2）和复选框（checkbox）；点击“删除”按钮则清空并重置该行所有字段。

本文介绍如何在 vue3 中为多行表单（如 10 行）实现「每行独立控制」：当用户在某行第一个输入框（input1）中输入任意非空内容时，自动启用该行的第二个文本框（input2）和复选框（checkbox）；点击“删除”按钮则清空并重置该行所有字段。

在 Vue3 的响应式开发中，面对重复结构（如 10 行相似表单），不推荐为每个字段手动声明 30+ 个独立 ref 变量，而应采用组件化 + 数组状态管理的设计思路——将单行逻辑封装为可复用的 组件，并通过 v-model 实现父子双向绑定。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

✅ 核心设计思想

• 每行数据以对象形式存储（{ input1: '', input2: '', checkbox: false }），整体维护在一个 ref 中；
• 利用 computed 动态判断启用状态：input1 非空即视为“已激活”，作为 input2 和 checkbox 的 :disabled 条件（注意：Vue 中 disabled 属性为真值禁用，因此需取反 !disable）；
• 封装 clearRow() 方法，一键还原该行至初始状态；
• 使用 v-model 语法糖（即 modelValue prop + update:modelValue event）实现简洁、语义化的双向绑定。

? 完整实现代码

<script setup>
import { ref, computed } from 'vue'

// 定义单行默认数据结构
const defaultRow = () => ({
  input1: '',
  input2: '',
  checkbox: false
})

// 自定义行组件（可直接内联于 setup script 中）
const CustomRow = {
  props: ['index', 'modelValue'],
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const model = computed({
      get: () => props.modelValue,
      set: (val) => emit('update:modelValue', val)
    })

    // 当 input1 有输入时启用后续控件（非空字符串即为 true）
    const isActivated = computed(() => !!model.value.input1)

    const clearRow = () => {
      model.value = { ...defaultRow() }
    }

    return {
      model,
      isActivated,
      clearRow
    }
  },
  template: `
    <div class="container-body">
      <div class="container-content">
      <div class="container-content">
        <input 
          :id="'Row'+index+'-input1'" 
          type="text" 
          v-model="model.input1"
        >
      
      <div class="container-content">
        <input 
          :id="'Row'+index+'-input2'" 
          type="text" 
          v-model="model.input2" 
          :disabled="!isActivated"
        >
      
      <div class="container-content">
        <div class="custom-control custom-checkbox">
          <input 
            :id="'Row'+index+'-checkbox'" 
            class="form-check-input" 
            type="checkbox" 
            :disabled="!isActivated" 
            v-model="model.checkbox"
          >
        
      
      <div class="container-content delete">
        <button @click="clearRow">?️ 清空
      
    
  `
}

// 父组件逻辑
const rows = ref(Array.from({ length: 10 }, () => defaultRow()))
</script><template><div id="app">
    <customrow v-for="(row, idx) in rows" :key="idx" :index="idx" v-model="rows[idx]"></customrow><!-- 调试用：查看实时数据 --><pre class="brush:php;toolbar:false;">{{ rows }}