前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 实现动态表单点击新增 增加一行输入框

vue 实现动态表单点击新增 增加一行输入框

原创
作者头像
一觉睡到小时候
发布2023-08-11 09:21:40
1.1K0
发布2023-08-11 09:21:40
举报
文章被收录于专栏:国产程序员

点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行

```

<el-col :span="12" class="mb20">

<el-form-item

:label="index == 0 ? '选择原材料' : ''"

v-for="(item, index) in form.productItemList"

:key="index"

:prop="'domains.' + index + '.value'"

>

<el-select v-model="item.name" filterable clearable placeholder="请输入原材料" @change="changeValue" @clear="clearValue">

<el-option v-for="item in productAll" :key="item.value" :label="item.name" :value="item.id" />

</el-select>

<el-input v-model="item.num" placeholder="请输入数量" style="position: absolute; left: 300px; width: 160px"></el-input>

<el-button

v-if="index !== 0"

class="mt-2"

type="danger"

style="position: absolute; left: 545px; bottom: 0px"

@click.prevent="removeDomain(domain)"

>删除</el-button

>

</el-form-item>

<el-form-item>

<el-button @click="addDomain" type="primary" style="position: absolute; left: 475px; bottom: 18px">添加</el-button>

</el-form-item>

</el-col>

```

定义方法

```

// 添加原材料

const addDomain = () => {

form.productItemList.push({

name: '',

num: '',

});

};

// 删除原材料

const removeDomain = (item: any) => {

const index = form.productItemList.indexOf(item);

if (index === -1) {

form.productItemList.splice(index, 1);

}

};

```

定义表单提交数据

```

// 提交表单数据

const form = reactive({

productItemList: [

{

name: '',

num: '',

},

],

});

```

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档