vue element表格 实现添加按钮，表格后新增一行的样式

稍微理了一下思路：

效果图：

实现：

<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)
},