vue 可自行添加减少的输入框操作数据渲染

最新推荐文章于 2023-06-20 14:31:48 发布

徒增悲伤

最新推荐文章于 2023-06-20 14:31:48 发布

阅读量441

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51000565/article/details/127357936

版权

本文展示了如何在Vue.js（iview框架）中创建动态表单，包括增删筛品规则输入框，并详细解释了如何处理表单数据，将数据转化为接口所需的格式。在JavaScript中，通过遍历items数组并拼接成字符串数组，实现了数据的转换。

摘要由CSDN通过智能技术生成

效果：

后台所需要数据类似于

直接上代码：

此处框架使用的是iview

   <FormItem label="筛品规则：" prop="sieve">
              <Row v-for="(item, index) in formDynamic.items" :key="index">
                <Col span="8" v-if="item.status">
                <Input style="width: 80px; margin-bottom: 10px;" v-model="item.value"/> ---
                <Input style="width: 80px; margin-bottom: 10px;" v-model="item.value1"/>
                </Col>
                <Col span="4" offset="1" v-if="item.status">
                <Button v-if="index < 1" @click="addScreen" size="default">＋</Button>
                <Button v-else @click="handleRemove(index)" size="default">－</Button>
                </Col>
              </Row>
            </FormItem>

js：

    //此处代码放在data里面
    formDynamic: {
        items: [
          {
            value: '',
            value1: '',
            index: 1,
            status: 1
          }
        ]
      },//筛品规则


      //请求接口时数据处理    定义好的数组this.formAddData.profit_interval
  this.formDynamic.items.forEach(el=>{
  this.formAddData.profit_interval.push(
    `${el.value}-${el.value1}`
        )
    })

    // 筛品输入框增加
    addScreen() {
      this.index++
      this.formDynamic.items.push({
        value: '',
        value1: '',
        index: this.index,
        status: 1,
      });
    },
    //筛品输入框减少
    handleRemove(index) {
      console.log(index);
      this.formDynamic.items[index].status = 0;
    }