原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示
效果示例地址
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" > <style> * { margin: 0; padding: 0 } body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; overflow: auto; font-weight: 400; -webkit-font-smoothing: antialiased; } .tb-edit .el-input { display: none } .tb-edit .current-row .el-input { display: block } .tb-edit .current-row .el-input+span { display: none } </style> </head> <body> <div id="app"> <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange"> <el-table-column label="日期" width="180"> <template scope="scope"> <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template scope="scope"> <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template scope="scope"> <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span> </template> </el-table-column> <el-table-column label="操作"> <template scope="scope"> <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>--> <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <br>数据:{{tableData}}</div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> var app = new Vue({ el: '#app', data: { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] }, methods: { handleCurrentChange(row, event, column) { console.log(row, event, column, event.currentTarget) }, handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } } }) </script> </html>
根据原理自定义效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍element-ui 表格实现单元格可编辑的示例,包括了element-ui 表格实现单元格可编辑的示例的使用技巧和注意事项,需要的朋友参考一下 如下所示: 以上这篇element-ui 表格实现单元格可编辑的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍JSP实现的简单分页显示效果代码,包括了JSP实现的简单分页显示效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JSP实现的简单分页显示效果代码。分享给大家供大家参考,具体如下: 希望本文所述对大家JSP程序设计有所帮助。
本文向大家介绍Vue实现内部组件轮播切换效果的示例代码,包括了Vue实现内部组件轮播切换效果的示例代码的使用技巧和注意事项,需要的朋友参考一下 对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比
本文向大家介绍vue elementui form表单验证的实现,包括了vue elementui form表单验证的实现的使用技巧和注意事项,需要的朋友参考一下 最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我
本文向大家介绍简单实现轮播图效果的实例,包括了简单实现轮播图效果的实例的使用技巧和注意事项,需要的朋友参考一下 一、要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二、实现代码: html代码: css代码: js代码: 以上这篇简单实现轮播图效果
vue+elementui里的table组件,怎么实现下面原型里的效果?请教 请教 补充: 是第一行全是下拉框,选中后保存按钮,这样列表里就会多出一行记录,这个是不是做不到的?感觉画原型的人想的太多了