稍微理了一下思路:
在这里插入图片描述
效果图:
在这里插入图片描述
实现:

<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)
},
GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐