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. 开始整SWF文字高亮显示——第一步:解析PDFToFlex源文件(修改补充版)
  2. 能进这个Java组织的都是大神,现在只有三个中国人
  3. mybatis08--关联查询多对一
  4. python交互模式设置及VIM的tab补齐
  5. Html5移动开发之Localstorage(本地存储)
  6. r语言岭回归参数选择_78-预测分析-R语言实现-岭回归与LASSO回归
  7. ubuntu安装python
  8. linux 间传输文件的几种方法scp、sftp
  9. ASP.NET人力资源管理系统源码大型HR源码
  10. 地图标识符号大全_资源小结:旅游类地图汇总(8.17版)
  11. 怎样对流媒体进行压力测试_loadrunner流媒体压力测试
  12. skyline在海洋及管线类3DGIS应用综述
  13. 三个月追求金牛全过程(图
  14. Functional Programming
  15. cef 获取 html代码,CefGlue获取网页源代码
  16. 孙陶然:昆仑36条创业军规
  17. 360企业版退出密码
  18. html5文档类型的doctype,DOCTYPE 文档类型
  19. SCN – What, why, and how?
  20. 怎样画流程图攻略:流程图绘制软件使用方法

热门文章

  1. easymock_EasyMock注释– JUnit 4
  2. 条件GAN论文简单解读
  3. vue canvas动效组件插件库制作
  4. 【工具使用系列】关于 MATLAB 神经网络故障诊断,你需要知道的事
  5. Ambari HDP 完整安装手册
  6. Linux关机重启指令
  7. 2B码农想转做产品,这的规划是否靠谱?
  8. Redis源码分析系列三:initServerConfig下半部分
  9. 百度地图定位SDK 之构想
  10. TDateTime转