html
<span>添加</span>
<el-input type=‘number‘ v-model="order_rowNum" placeholder="请输入行数"></el-input>
<span>行明细</span>
<el-button type="primary" min="1" @click=‘add_row‘>添加</el-button>
<!-- 表格 -->
<el-table :data="table" border>
<el-table-column label="操作" width=‘80px‘>
<template slot-scope="scope">
<el-button plain size="small" type="danger" @click="delect(scope.$index)">删除</el-button>
</template>
</el-table-column>
<el-table-column label="名称">
<template slot-scope="scope">
<el-input type="textarea" :autosize="{ minRows: 1}" placeholder="请输入内容" v-model="scope.row.name"></el-input>
</template>
</el-table-column>
</el-table>
data数据
rowNum: 0,
table: [
{
name: ‘‘,
},
],
方法
// 增加行数
add_row() {
let len = this.order_rowNum;
// 判断输入框的内容
if (this.rowNum === ‘‘ || this.rowNum <= 0 || this.rowNum === null) {
this.$message({
message: ‘请输入正确的行数!‘,
type: ‘error‘
});
} else {
if (len > 0) {
for (let i = 1; i <= len; i++) {
let list = {
name: ‘‘,
}
this.table.push(list);
}
return this.table;
} else {
return this.table;
}
}
},
// 删除按钮
delect(index) {
this.$confirm(‘确认删除表格信息?‘, ‘提示‘, {
showClose: true,
confirmButtonText: ‘确定‘,
cancelButtonText: ‘取消‘,
type: ‘warning‘
})
.then(() => {
this.table.splice(index, 1);
})
.catch(action => {});
},
原文:https://www.cnblogs.com/JaneLifeBlog/p/14034349.html