vue 实现动态表单点击新增 增加一行输入框
Vue 实现 动态 表单 点击 增加 新增 一行
2023-09-11 14:19:17 时间
存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行
<el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
<div v-for="(item, index) in form.dynamicItem" :key="index">
<el-form-item
label="姓名"
:prop="'dynamicItem.' + index + '.name'"
:rules="{
required: true, message: '姓名不能为空', trigger: 'blur'
}"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item
label="手机号"
:prop="'dynamicItem.' + index + '.phone'"
:rules="[
{required: true, message: '手机号不能为空', trigger: 'blur'},
{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
]"
>
<el-input v-model="item.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
<el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
</el-form-item>
</div>
</el-form>
data中定义,默认添加一条
form: {
dynamicItem: [
{
name: "",
phone: ""
}
]
},
methods方法
addItem() {
this.form.dynamicItem.push({
name: "",
phone: ""
});
},
sure(form) {
console.log(this.form.dynamicItem.length, "length");
this.$refs[form].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
deleteItem(item, index) {
this.form.dynamicItem.splice(index, 1);
console.log(this.form.dynamicItem, "删除");
},
相关文章
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- [转]vue项目中 指令 v-html 中使用过滤器filters功能
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- Vue整合HighCharts和ECharts实现数据可视化
- 基于Go语言+Vue MySQL实现(Web)毕业设计网上选题系统【100010336】
- vue 命名路由
- VUE图片懒加载-vue lazyload插件的简单使用
- vue项目中Excel表格导出下载功能实现
- vue实战入门后台篇三:springboot+mybatis实现网站后台-实体及基础框架搭建
- vue router导航守卫与不同的历史模式
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- 浅析Vue中插槽slot的使用
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- vscode快速生成vue代码---创建Vue代码模板
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue中使用better-scroll实现菜单和列表联动的滚动效果,附完整演示代码,(可直接复制)
- vue-cli配置多入口多出口,实现一个项目两个访问地址,区分不同上线环境