稍微理了一下思路:
效果图:
实现:
<el-button @click="addziduan">添加字段</el-button>
<el-table :data="prototypes" class="kong-box">
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column prop="aaa" label="姓名" width="480" align="center">
<template slot-scope="scope">
<span v-if="scope.row.vVisible">{{scope.row.fieldDescription}}</span>
<el-input v-else ref="marker1"v-model="scope.row.fieldDescription" class="inputheight"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<span v-if="scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
<span v-else class="items" @click="save(scope.row)">保存</span>
<span>|</span>
<span class="items" @click="deleteit(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
表格原本绑定的数据
prototypes:[
{
name: 'type',
describe: '设备类型字段,不可修改',
isNull: false,
vVisible: true
}
]
// 添加字段按钮
addziduan() {
// 向表格数组中数据添加一行
this.prototypes.push({
index: this.prototypes.length,
name: '',
describe: '',
isNull: false,
vVisible: false
})
console.log(this.prototypes)
},
// 删除按钮
deleteit(row) {
this.prototypes.splice(row.index, 1)
},