ElementUI-自定义模板包含编辑与删除的功能
2019独角兽企业重金招聘Python工程师标准>>>
自定义列的显示内容,可组合其他组件使用。此例子结合bootstrap的模态框实现编辑功能
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>AdminLTE 2 | Morris.js Charts</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="../plugins/elementUI/elementUI.css"><style>.green{color:green;}</style>
</head><body class=""><div id="demo"><el-table:data="tableData"style="width: 100%"><el-table-columnlabel="日期"width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-columnlabel="姓名"width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, tableData)">删除</el-button></template></el-table-column></el-table><!-- 模态框(Modal) --><div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">信息编辑</h4></div><div class="modal-body"><input type="text" class="form-control" v-model="initialData"></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="save()">保存</button><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div>
</div><script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script><script src="../plugins/bootstrap/js/bootstrap.js"></script><script src="../js/vue-2.5.13.js"></script><script src="../plugins/elementUI/elementUI.js"></script><script>var demo = new Vue({el: '#demo',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 弄'}],initialData:"",editId:0},methods:{handleEdit(index,row){console.log(index,row);$("#editBox").modal();this.editId=index;this.initialData=this.tableData[index].date},save(){this.tableData[this.editId].date=this.initialData},handleDelete(index,data){//console.log(index,row);data.splice(index, 1);}}})</script>
</body></html>
转载于:https://my.oschina.net/u/2612473/blog/1607016
ElementUI-自定义模板包含编辑与删除的功能相关推荐
- 处理vue elementui图片回显编辑/修改/删除
需求elementui提供啦美观的控件支持页面快速开发, 这里结合jq来实现控件图片上传后的回显问题,回显还能进行编辑,效果如下 代码: html中加入:file-list="fileLis ...
- 二、AEM中自定义模板和页面
文章目录 自定义模板和页面 repo安装 cygwin安装 IDEA中安装repo工具 在WKND中自定义模板和页面 部署WKND示例到author实例 自定义模板 模板编辑的三种模式 Structu ...
- 计算机教案word格式模板,用自定义模板编辑教案
随着信息时代的到来以及个人计算机的飞速普及,各个中小学校都相继配置了办公用计算机.许多学校装备了微机室.微机备课室,甚至条件较好的学校为每一位教师都配备了一台个人计算机.也正是这样,许多教师的备课教案 ...
- PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例
PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例 效果图展示 情景说明: 开发环境与准备 开发 相关文献: End 效果图展示 情景说明: 现在有个PDF ...
- layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
- VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程 下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件 安装扩展插 ...
- 可以自定义模板的ide_将IDE检查应用于自定义Java批注
可以自定义模板的ide J2SE 5中注释的引入改变了我们编写和处理Java的方式. 除了Java SE的预定义注释外 ,框架,IDE和工具包还引入了自己的自定义注释 . Checker框架提供了一些 ...
- dataflow_Apache Beam,Google Cloud Dataflow和使用Python创建自定义模板
dataflow 阿帕奇光束 (Apache Beam) Apache Beam(Batch + Stream) is a unified programming model that defines ...
- android购物车编辑删除,Shopify Buy Button 及嵌入式购物车编辑或删除设置
原标题:Shopify Buy Button 及嵌入式购物车编辑或删除设置 注意:这属于高级教程,不受 Shopify的支持.此教程要求您具有 HTML.CSS.Java 和 Liquid 等 Web ...
最新文章
- php 的包管理工具 composer
- lvs fullnat+ECMP【1】内核编译
- 单体 Bean 注册实例
- mysql sleep详解_sql注入详解(二)
- 【链接保存】十分钟上手sklearn:安装,获取数据,数据预处理
- C java new_你还在new对象吗?Java8通用Builder了解一下?
- C++枚举(enum)
- Python 爬取 42 年高考数据,告诉你高考为什么这么难?
- [安全测试报告]针对某厂商的一次渗透性测试
- 去掉softmax后Transformer会更好吗?复旦华为诺亚提出SOFT:轻松搞定线性近似
- 天思软件常见问题汇总
- 微信小程序——轮播图
- 高中数学压轴解答题:函数零点
- Java实现英汉词典API初版发布在Maven
- MATLAB导入数据
- mac最值得关注的终端工具,全功能串行终端管理软件Serial
- 香橙派Zero2电视盒子开发板连接HDMI如何修改分辨率
- gitlab 配https_gitlab容器--带https配置
- 抖音巨量千川是什么?和飞瓜智投有什么不同?后者功能更强大!
- 微前端MicroApp的学习(一):简单搭建项目
热门文章
- android数据绑定_Android数据绑定高级概念
- Python zipfile – Python ZIP
- 如何创建线程?如何创建扩展Thread类?
- Java基础篇:finalize( )方法的使用
- apt系统中sources.list文件的解析
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
- 三、 复杂对象类型的WebService
- 二叉树转换成森林amp;森林变成二叉树
- 【Hadoop Summit Tokyo 2016】中型组织的数据基础设施架构:收集、存储和分析的技巧...
- 20155332 如何获取新技能+c语言学习调查