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

处理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 ...

ElementUI-自定义模板包含编辑与删除的功能

ElementUI-自定义模板包含编辑与删除的功能相关推荐

最新文章

热门文章