vue+element 动态添加input框

2022-08-03 11:19:49
1.实现效果

下拉框选择数字,下面动态添加input输入框
在这里插入图片描述

  1. 代码
<el-form-item label="选择项" prop="checkValue"><el-select placeholder="请选择"
             v-model="checkValue"
             @change="selectChange"><el-option v-for="item in selectOptions"//selectOption是自己定义的下拉框内容:key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-col:span="12" v-for="(item, index) in form.content":key="index"><el-form-item:label="'选择项描述'+ (index + 1)" prop="checkDescribe"><el-input v-model="item.text"
               placeholder="请输入内容"
               style="width: 12.8vw"
               @input="tosing_list"/></el-form-item></el-col>

selectOptions:[{
      value:1,
      label:1,},{
      value:2,
      label:2,}]

method:{selectChange(value){this.str='';this.form.content=[];let i=0;var arr=[];for(let i=0; i< value; i++){
       arr.push({ text:""});}this.form.content= arr;},tosing_list(){// 数组拼接var str='';this.form.content.forEach((item)=>{if(item.text!==""){
	      str+= item.text+",";}});this.str= str;}}
  • 作者:没知觉,
  • 原文链接:https://blog.csdn.net/Funny2333/article/details/115757525
    更新时间:2022-08-03 11:19:49