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">&times;</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-自定义模板包含编辑与删除的功能相关推荐

  1. 处理vue elementui图片回显编辑/修改/删除

    需求elementui提供啦美观的控件支持页面快速开发, 这里结合jq来实现控件图片上传后的回显问题,回显还能进行编辑,效果如下 代码: html中加入:file-list="fileLis ...

  2. 二、AEM中自定义模板和页面

    文章目录 自定义模板和页面 repo安装 cygwin安装 IDEA中安装repo工具 在WKND中自定义模板和页面 部署WKND示例到author实例 自定义模板 模板编辑的三种模式 Structu ...

  3. 计算机教案word格式模板,用自定义模板编辑教案

    随着信息时代的到来以及个人计算机的飞速普及,各个中小学校都相继配置了办公用计算机.许多学校装备了微机室.微机备课室,甚至条件较好的学校为每一位教师都配备了一台个人计算机.也正是这样,许多教师的备课教案 ...

  4. PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例

    PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例 效果图展示 情景说明: 开发环境与准备 开发 相关文献: End 效果图展示 情景说明: 现在有个PDF ...

  5. layui中的数据表格-自定义模板

    layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...

  6. VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件

    1. 下载和官网教程 下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件 安装扩展插 ...

  7. 可以自定义模板的ide_将IDE检查应用于自定义Java批注

    可以自定义模板的ide J2SE 5中注释的引入改变了我们编写和处理Java的方式. 除了Java SE的预定义注释外 ,框架,IDE和工具包还引入了自己的自定义注释 . Checker框架提供了一些 ...

  8. dataflow_Apache Beam,Google Cloud Dataflow和使用Python创建自定义模板

    dataflow 阿帕奇光束 (Apache Beam) Apache Beam(Batch + Stream) is a unified programming model that defines ...

  9. android购物车编辑删除,Shopify Buy Button 及嵌入式购物车编辑或删除设置

    原标题:Shopify Buy Button 及嵌入式购物车编辑或删除设置 注意:这属于高级教程,不受 Shopify的支持.此教程要求您具有 HTML.CSS.Java 和 Liquid 等 Web ...

最新文章

  1. php 的包管理工具 composer
  2. lvs fullnat+ECMP【1】内核编译
  3. 单体 Bean 注册实例
  4. mysql sleep详解_sql注入详解(二)
  5. 【链接保存】十分钟上手sklearn:安装,获取数据,数据预处理
  6. C java new_你还在new对象吗?Java8通用Builder了解一下?
  7. C++枚举(enum)
  8. Python 爬取 42 年高考数据,告诉你高考为什么这么难?
  9. [安全测试报告]针对某厂商的一次渗透性测试
  10. 去掉softmax后Transformer会更好吗?复旦华为诺亚提出SOFT:轻松搞定线性近似
  11. 天思软件常见问题汇总
  12. 微信小程序——轮播图
  13. 高中数学压轴解答题:函数零点
  14. Java实现英汉词典API初版发布在Maven
  15. MATLAB导入数据
  16. mac最值得关注的终端工具,全功能串行终端管理软件Serial
  17. 香橙派Zero2电视盒子开发板连接HDMI如何修改分辨率
  18. gitlab 配https_gitlab容器--带https配置
  19. 抖音巨量千川是什么?和飞瓜智投有什么不同?后者功能更强大!
  20. 微前端MicroApp的学习(一):简单搭建项目

热门文章

  1. android数据绑定_Android数据绑定高级概念
  2. Python zipfile – Python ZIP
  3. 如何创建线程?如何创建扩展Thread类?
  4. Java基础篇:finalize( )方法的使用
  5. apt系统中sources.list文件的解析
  6. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
  7. 三、 复杂对象类型的WebService
  8. 二叉树转换成森林amp;森林变成二叉树
  9. 【Hadoop Summit Tokyo 2016】中型组织的数据基础设施架构:收集、存储和分析的技巧...
  10. 20155332 如何获取新技能+c语言学习调查