vue中表格批量导入数据,新增时表格增加一行并保存
1、效果图如下,2至4条是批量导入的数据,第一条是新增数据2、表格代码如下,用scope.row.edit控制是否显示新增的输入框<el-tableclass="mt-10":data="invoiceOpt.invoicenoRegisterList"stripeborder><el-table-column type="index" label="序号" min-width=
·
1、效果图如下,2至4条是批量导入的数据,第一条是新增数据
2、表格代码如下,用scope.row.edit控制是否显示新增的输入框
<el-table
class="mt-10"
:data="invoiceOpt.invoicenoRegisterList"
stripe
border
>
<el-table-column type="index" label="序号" min-width="50"></el-table-column>
<el-table-column label="发票号" prop="invoicedNo" min-width="120">
<template slot-scope="scope">
<span v-if="scope.row.edit"><el-input v-model="scope.row.invoicedNo"></el-input></span>
<span v-else>{{scope.row.invoicedNo}}</span>
</template>
</el-table-column>
<el-table-column label="发票金额(元)" prop="invoiceAmount" min-width="120" align="right">
<template slot-scope="scope">
<span v-if="scope.row.edit"><el-input v-model="scope.row.invoiceAmount"></el-input></span>
<span v-else>{{scope.row.invoiceAmount}}</span>
</template>
</el-table-column>
<el-table-column label="税率" prop="" min-width="60">
<template slot-scope="scope">
<span v-if="scope.row.edit"><el-input v-model="scope.row.taxRate"></el-input></span>
<span v-else>{{scope.row.taxRate}}</span>
</template>
</el-table-column>
<el-table-column label="附件名称" prop="invoiceFilename" min-width="120">
<template slot-scope="scope">
<span v-if="scope.row.edit"><el-input v-model="scope.row.invoiceFilename"></el-input></span>
<span v-else>{{scope.row.invoiceFilename}}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="90">
<template slot-scope="scope">
<el-button type="text" style="width: 30px;" class="tb-btn" size="small" @click="handleDelRow(scope)">删除</el-button>
<el-button v-if="scope.row.edit" type="text" style="width: 30px;" class="tb-btn" size="small" @click="handleSaveRow(scope)">保存</el-button>
</template>
</el-table-column>
</el-table>
3、在methods里面写新增,保存,删除方法
//新增方法
add(){
var list = {
invoiceAmount:'',
invoiceFilename: '',
invoicedNo:'',
taxRate:'',
edit:true
};
this.invoiceOpt.invoicenoRegisterList.unshift(list)//往数组前面新增
},
//保存
handleSaveRow(scope){
scope.row.edit=false;
},
///删除
handleDelRow(scope){
this.$confirm('确定删除吗', '提示').then(() => {
this.invoiceOpt.invoicenoRegisterList.splice(scope.$index,1);
})
},
4、批量导入得到的数组arr,需要把新增和批量导入的数组合并为一个数组,并且返回新的长度
this.invoiceOpt.invoicenoRegisterList.push.apply(this.invoiceOpt.invoicenoRegisterList,arr)
更多推荐
已为社区贡献6条内容
所有评论(0)