广州大型网站建设公司社区推广

需求： 给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(',')
}