当前位置：首页 > news >正文

表单input 通过点击按钮新增input框(Vue3)

news 来源：原创 2025/5/1 18:50:35

需求：给label是车型的输入框后加入新增按钮，label是车型的输入框本身禁用；新增新的输入框，并填写数据，将数据用,拼接起来给车型输入框

      <el-form id="carmodelMqsId" ref="formDataRef" :key="formKey" :model="formData" class="cncform" :rules="rules" label-width="200px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="包含车型(整车编码前8位):" prop="IncludeCarModel" class="binding-class">
              <el-input v-model="formData.IncludeCarModel" disabled />
            </el-form-item>
          </el-col>
          <el-button style="margin-left: 5px" icon="Plus" circle @click="addNewPlant" />
          <span class="input-hint">只能使用"*"替代符</span>
        </el-row>
        <!-- 下面是输入框和 一个减号按钮 -->
        <el-row v-for="(item, index) in formData.formList" :key="index" style="margin-bottom: 8px">
          <el-col :span="12">
            <el-form-item label="" prop="" class="binding-class">
              <el-input v-model="item.carModelName" @input="updateIncludeCarModel" style="width: 90%" />
              <el-button v-if="formData.formList.length > 0" circle style="margin-left: 5px" icon="Remove" @click="removeField(index)" />
            </el-form-item>
          </el-col>
        </el-row>
</el-form>

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

const formDataRef = ref(null)
const formData = reactive({
  no: '',
  carModelName: '',
  formList: [],
  IncludeCarModel: '', // 包含车型
  excludeCarModel: '', // 排除车型
  excludeList: [],
  editUser: '',
  editTime: ''
})

<script>

// 包含车型(整车编码前8位) 新增
const addNewPlant = () => {
  formData.formList.push({ carModelName: '' })
}

// 删除
const removeField = (index) => {
  formData.formList.splice(index, 1) // 删除指定索引的项
  updateIncludeCarModel()
}

// 展示数据的
const updateIncludeCarModel = () => {
  // 获取所有输入框中的值，按顺序合并为逗号分隔的字符串
  const carModels = formData.formList.map((item) => item.carModelName).filter((name) => name)
  formData.IncludeCarModel = carModels.join(',')
}