Vue中动态增加表单项的方法

在我的项目中遇到了两种动态增加表单项的场景,一种是对Form的添加,另外一种是对Table的添加。当初实现这两种时还有一点喜悦,现在回过头来看,发现这两种实际就是一种,以后就可以根据个人喜好选择了。

动态增加Form表单

这里因为要添加的表单项存在着父子关系,要添加的子代很多,而父代属性又一致,用这种方式可以减少重复操作。表单样式就不再赘述了,具体看图

image.png

点击添加要素按钮,就可以添加一个新的要素表单出来,
image.png

实现方案如下:
1、将需要动态增加的表单部分写在一个<div>标签下,标签内容绑定到formData中的数组项tabs上。

<div v-for="(tab,index) in formData.tabs" :key="index"></div>

这里tab就是我们每次添加子表单时要push进数组tabs的内容。
2、为添加要素按钮绑定一个 addTab()方法,用于在每次添加子表单时,向数组中push一个元素

addTab() {
                this.formData.tabs.push({
                    tabId: "",
                    fieldId: "",
                });
            }

3、对表单项的编写与正常一样,只不过在数据绑定上不同,需绑定到tab中的元素

<el-form-item label="页签顺序">
  <el-input v-model="tab.fieldNo" auto-complete="off" style="width: 50px">
</el-input></el-form-item>

4、如果要删除多余tab,需要在<div>中声明一个removeTab()的方法,来删除对应的tab,这点区别于addTab(),它是定义在<div>之外的,每次新增的tab都会插到整个表单的末尾。

removeTab(item) {
                let index = this.formData.tabs.indexOf(item);
                if (index !== -1) { //当没有多余tab时就不再删除
                    this.formData.tabs.splice(index, 1)
                }
            }

动态增加Table

这里的table也是存在父子关系,只是展示形式的区别。因为后台的数据还有着展示的需要,所以才选用了表格这种形式来实现。
1、将table组件声明在一个<template>标签下,用以根据后台数据进行动态加载。

<template>
    <el-table 
      :data="articleList" //数据绑定
    </el-table>
</template>

2、对表格中需要编辑的内容,可以在<template>标签下声明一个输入框,并使用插槽来实现数据的绑定。

<el-table-column label="文案" prop="article" fixed>
  <template slot-scope="scope">
    <el-input v-model="scope.row.article" type="textarea" autosize></el-input>
  </template>
</el-table-column>

3、与上面相同的,声明一个addRow()的方法,用于增加表格的行数。

addRow(tableData) {
                tableData.push({
                    id: "",
                    showNo: "",
                    article: "",
                    isNew: "y"
                })
            }

4、删除不想要的行,需要对应增加一个deleteRow()方法

deleteRow(index,row,rows){
    rows.splice(index,1)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,549评论 0 17
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 5,450评论 0 9
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,275评论 0 25
  • 我在Vue动态组件上的坑上重复踩了两次,一模一样的两次思考过程。 我想,这个重复思考的过程并不是偶然,说明是很有必...
    嘉宝_Appian阅读 25,010评论 6 19
  • 今年改革开发40周年大会上给改革开放先锋人物颁发具有改革先锋荣誉奖章,马云是其中一位,我们部门组织员工观看大会情况...
    小花的能量阅读 444评论 0 1