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

在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)

},

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

d出窗口可分为打开一个新的浏览器窗口和在本页面上打开一个d出层，打开新的浏览器窗口现在一般用的比较少，交互性和用户体验相对较差。这里我重点说一下d出层方式：

d出层设置一般有两种方式：

1、是自己写隐藏div,在需要打开d出层的时候可以显示div；完成后可以隐藏div

2、使用现有的一些控件，比如easyui的dialog组建、artDialog组件等，现在类似的组建比较多也使用起来也相对比较方便；

在d出窗口中做明细数据的录入、保存和更新到主页面实现思路大概如下：

1、在主页面点击按钮打开d出层，d出层中有录入明细信息的表单

2、在明细表单中录入信息后，点击表单中的按钮，将信息发送到服务器端，由服务器端进行入库（表单的提交可以是form提交和ajax方式提交 ）

3、form表单提交可以设置target="_self"，提交成功后刷新本页面，主页面会查询出新增的明细数据

4、ajax方式提交，当数据提交成功（即获得服务返回成功标识 ）后，可以将新增的明细数据通过js动态添加到主页面上，然后关闭d出层，这种方式的用户体验要好很多。

---