vue~封装一个文本框添加与删除的组件
标签组件的效果如下
组件作用
- 这是一个div,包含了两个文本框,后面是添加和删除按钮
- 添加按钮复制出新的div,除了文本框没有内容,其它都上面一样
- 删除按钮将当前行div删除
组件实现
<template>
<div>
<template v-for="(item,index) in tags">
<el-row :gutter="4" style="margin:5px;">
<el-col :span="8">
<el-input v-model="item.authorName" placeholder="作者名称"/>
</el-col>
<el-col :span="8">
<el-input v-model="item.authorUnit" placeholder="作者单位名称"/>
</el-col>
<el-col :span="4">
<el-button type="text" @click="addAuthor">添加</el-button>
<span style="padding:2px;">|</span>
<el-button type="text" @click="delAuthor(index)">删除</el-button>
</el-col>
</el-row>
</template>
</div>
</template>
<script>
export default {
name: "AuthorUnit",
props: {dic: {type: Array, default: []}},
data() {
return {
tags: [],
};
}, created() {
if(this.dic!=null && this.dic.length>0){
this.tags = this.dic;//关键字初始化,dic的值来自于父组件(调用它的组件叫父组件)
}
},
methods: {
addAuthor() {
this.tags.push({authorName: '', authorUnit: ''});
},
delAuthor(index) {
this.tags.splice(index, 1);
},
},
}
</script>
调用组件,为组件传默认值
<el-form-item label="作者信息" prop="articleAuthorList">
<author-unit v-model="form.articleAuthorList" :dic="form.articleAuthorList"/>
</el-form-item>
测试代码
提交之后,将出现当前你添加的这个列表的对象,对接后端接口,将这个数组POST到后端即可,如图所示:
合集:
前端技术
分类:
前端技术 / vue&react
, 前端技术
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2017-09-26 微服务~Eureka实现的服务注册与发现及服务之间的调用
2013-09-26 知方可补不足~row_number,rank,dense_rank,ntile排名函数的用法
2013-09-26 知方可补不足~目录
2013-09-26 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页