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

Posted 2023-03-01

参考技术A 在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)
,
同思路可自定义添加各种属性给表格做相应操作。