elementui怎么d出表单然后保存添加一行数据到表格里

elementui怎么d出表单然后保存添加一行数据到表格里,第1张

在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容

table的数据为datas=[],那么下面是一列的数据,多列可循环或复制

 <el-table-column

prop="name"

label="件号"

sortable

show-overflow-tooltip:

true

align="center"

width="180"

>

<template slot-scope="scope">

<template

v-if="scope.row.show"

>

<el-form-item

label=" "

prop="name"

>

<el-input

v-model="ruleForm.name"

disabled="true"

size="mini"

>

<i

slot="suffix"

class="el-input__icon el-icon-search"

@click="Partnum"

/>

</el-input>

</el-form-item>

</template>

<template v-else>

<span @click="partNumber(scope.$index, scope.row)">{{ scope.row.name }}</span>

</template>

</template>

</el-table-column>

这思路主要是template里面还有2个template,在data数组的 *** 作中每条加一个属性show来控制是显示输入框还是里面的某个字段,

addBtn () {// 添加按钮事件

let data = { show: true }

this.datasNew.unshift(data)

},

同思路可自定义添加各种属性给表格做相应 *** 作。

element+vue点击新增表格内在已有数据添加一行带输入框内容

在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容

table的数据为datas=[],那么下面是一列的数据,多列可循环或复制

 <el-table-column

              prop="name"

              label="件号"

              sortable

              show-overflow-tooltip:

              true

              align="center"

              width="180"

            >

              <template slot-scope="scope">

                <template

                  v-if="scope.row.show"

                >

                  <el-form-item

                    label=" "

                    prop="name"

                  >

                    <el-input

                      v-model="ruleForm.name"

                      disabled="true"

                      size="mini"

                    >

                      <i

                        slot="suffix"

                        class="el-input__icon el-icon-search"

                        @click="Partnum"

                      />

                    </el-input>

                  </el-form-item>

                </template>

                <template v-else>

                  <span @click="partNumber(scope.$index, scope.row)">{{ scope.row.name }}</span>

                </template>

              </template>

            </el-table-column>

这思路主要是template里面还有2个template,在data数组的 *** 作中每条加一个属性show来控制是显示输入框还是里面的某个字段,

addBtn () {// 添加按钮事件

      let data = { show: true }

      this.datasNew.unshift(data)

    },

同思路可自定义添加各种属性给表格做相应 *** 作。

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

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

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法,用于在每次添加子表单时,向数组中push一个元素

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

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

这里的table也是存在父子关系,只是展示形式的区别。因为后台的数据还有着展示的需要,所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下,用以根据后台数据进行动态加载。

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7905039.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存