首页 > 其他分享 >vue~封装一个文本框添加与删除的组件

vue~封装一个文本框添加与删除的组件

时间:2023-11-15 14:32:38浏览次数:41  
标签:vue 封装 删除 tags 文本框 dic 添加 组件

标签组件的效果如下

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~封装一个文本框添加与删除的组件_扫一扫_02


vue~封装一个文本框添加与删除的组件_扫一扫_03

作者:仓储大叔,张占岭,
荣誉:微软MVP

标签:vue,封装,删除,tags,文本框,dic,添加,组件
From: https://blog.51cto.com/u_15765017/8390820

相关文章

  • Vue双向数据绑定原理-上
    Vue响应式的原理(数据改变界面就会改变)是什么?时时监听数据变化,一旦数据发生变化就更新界面,这就是Vue响应式的原理。Vue是如何实现时时监听数据变化的通过原生JS的defineProperty方法,通过get和set方法来监听数据的变化。defineProperty方法的特点可以直接在一个对象上定义一......
  • js是一门基于对象的语言,js不是面向对象的语言,但是可以模拟面向对象的思想,具体说面向
    下列关于JavaScript的说法中正确的是()A所有变量在使用之前必须做声明BJavaScript是面向对象的程序设计语言CJavaScript是解释性语言DJavaScript前身是Oak语言正确答案:C选C。解释性语言是相对于编译型语言存在的,源代码不是直接翻译成机器语言,而是先翻译成中间代码,再由......
  • Vue实验记录
    webpack安装首先下载node.jshttps://nodejs.org/en下载完成后进行安装,直接下一步就可以安装完成后,在cmd中查看是否安装成功然后安装webpack安装脚手架创建项目选择第二个创建完成后的效果进入项目并运行在学习通中下载源码,把源码按照项目格式放到创建好的项目......
  • vuejs3.0 从入门到精通——项目搭建
    项目搭建一、环境准备软件名称软件版本nodev20.9.0npm10.1.0Windows10专业版22H2vue/cli5.0.8vitev4.5.0二、vite创建项目>npminitvite@latestsaas--templatevue√Selectaframework:»Vue√Selectavariant:»TypeScriptSca......
  • Vue-cli 用自定义的组件有遇到过哪些问题?
    在components目录新建你的组件文件(indexPage.vue),script一定要exportdefault{}在需要用的页面(组件)中导入:importindexPagefrom'@/components/indexPage.vue'注入到vue的子组件的components属性上面,components:在template视图view中使用,例如命名为inde......
  • Vue3+Element plus 实现表格可编辑
    <template><div><el-buttontype="primary"@click="handleAdd">新增</el-button></div><div><el-table:data="tableData"style="width:100%&quo......
  • vue3 与 vue2 的区别
    布尔型Attribute​布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上。disabled就是最常见的例子之一。v-bind在这种场景下的行为略有不同:<button:disabled="isButtonDisabled">Button</button>当isButtonDisabled为真值或一个空字符串(......
  • Vue_MQTT项目搭建记录
    新建vue3项目#新建vite+vue3的项目npminitvue@latestyarn安装依赖包yarnaddmqtt初探-连接阿里云物联网平台代码:<template><div><h1>LED-IOT</h1><button@click="connectToBroker">Connect</button><button@......
  • vue3源码学习api-vue-sfc文件编译
    vue最有代表性质的就是.VUE的文件,每一个vue文件都是一个组件,那么vue组件的编译过程是什么样的呢Vue单文件组件(SFC)和指令ast语法树一个Vue单文件组件(SFC),通常使用*.vue作为文件扩展名,它是一种使用了类似HTML语法的自定义文件格式,用于定义Vue组件。一个Vue单......
  • Vue 组件里的定时器要怎么销毁?
    如果页面上有很多定时器,可以在data选项中创建一个对象timer,给每个定时器取个名字一一映射在对象timer中,在beforeDestroy构造函数中清除,beforeDestroy(){ for(letkinthis.timer){ clearInterval(k) }}如果页面只有单个定时器,可以这么做consttimer=setInterv......