vue element表格 实现添加按钮,表格后新增一行的样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/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)
},
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 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)