element-ui表格添加修改框的方法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-table-column prop="name" label="品种名称">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.name"></el-input>
</template>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" >
<template slot-scope="scope">
<el-button type="success" size="mini" v-if="scope.row.edit" icon="el-icon-circle-check-outline" @click="modifi(scope.row)">修改</el-button>
<el-button v-else type="primary" size="mini" @click=" scope.row.edit=!scope.row.edit" icon="el-icon-edit" >编辑</el-button>
<el-button type="danger" size="mini" @click="openDelSonBreed(scope.row)">删除</el-button>
</template>
</el-table-column>
主要用到了v-if来判断点击按钮的时候内置input是否出现,
###在这里有一个坑
在element-ui的 el-table里面 所有的数据都是循环产生的,如果使用v-if绑定一个data里面的值来进行判断的话,点击一个会出现所有的input都显示,
所以在这里需要用到 scope属性,scope属性里面我们可以在里面添加一个判断的值 edit,这个edit就是每个独有的啦。不会出现所有的一起出现问题。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
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 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)