vue实现动态表单（表格动态增加减少，提交）

做个废材真好

已于 2023-01-06 17:30:54 修改

阅读量2.4k

点赞数

文章标签： vue.js javascript 前端

于 2023-01-06 17:28:20 首次发布

本文链接：https://blog.csdn.net/qq_53539628/article/details/128582297

版权

动态数量的表单提交

  今天接到需求，需要对表单外链物品，可以在表单提交时一并提交表单外联的物品，物品是动态增加减少的。
  例如这样：
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/428f3e53ea264c718e18c5b992b84b19.png)
  对产品动态增加，减少可以用数组来进行实现。

动态变化

 <tr v-for="(item, index) in reprotPordKindinfoList" :key="index">
          <td style="text-align: center">
            <span>{{ index + 1 }}</span>
          </td>
          <td>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入产品名称"
              v-model="item.productName"
              class="paperview-input-text"
            >
            </el-input>
          </td>
             <td>
            <el-button @click="delrow(index)" type="info" round>删除</el-button>
          </td>
</tr>
 <el-button @click="addrow" type="warning" round>增加行数</el-button>

data() {
    return {
      corpId:"",
      corpName:"",
      reprotPordKindinfoList: [
        {
          productName: "",
        },
        {
          productName: "",
        },
      ],
 }
  methods: {
    addrow() {
      let row = {
        productName: "",
      };
      this.reprotPordKindinfoList.push(row);
    },
    delrow(index) {
      this.reprotPordKindinfoList.splice(index, 1);
    },
   }