vue+element-ui+ajax实现一个表格的实例
作者：MrZero404 发布时间：2024-04-10 10:34:27
标签：vue,elementui,ajax,表格
实例如下：
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.2.1.js"></script>
<script src="vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-table :data="tableData" style="width: 100％">
<el-table-column label="任务" width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</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="历时" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.take }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.startTime }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.finishTime }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
tableData: [],
getUrl: 'http://localhost:8080/mytime/getTodayTomatos',
},
created: function(){
this.getTableData()
},
methods:{
getTableData:function(){
var self = this;
$.ajax({
type : "post",
dataType : "json",
contentType : "application/json",
url : "http://localhost:8080/mytime/getTodayTomatos",
success : function(json) {
self.tableData=json.fitomatos;
},
error : function(json) {
alert("加载失败");
}
});
},
handleEdit(index, row) {
console.log(index, row.name);
},
handleDelete(index, row) {
console.log(index, row);
}
}
})
</script>
</body>
</html>
效果图：
来源：http://blog.csdn.net/mrzero404/article/details/78899806
0
投稿猜你喜欢
- HTML在线编辑器相信大家见得多了，有些流行的在线编辑器具有很丰富的功能。但美中不足的是，现有的HTML在线编辑器设置字号大小通常只限于1-
- 一、字符串类型1）字符串是字符的序列表示，根据字符的内容分为单行字符串和多行字符串。2）单行字符串可以由一对单引号（’）
- 想学习Python3，但是暂时又离不开Python2。在Windows上如何让它们共存呢？目前国内网站经常会让大家把其中一个python.e
论文：Interactive Image Warping（1993年Andreas Gustafsson）算法思路：以眼睛中心为中心点，对眼- Static files管理static files指一些用到的像css,javascript,images之类的文件。在开发阶段：1.在s
- —— 八数码难题 ——1.题目描述八数码问题也称为九宫问题。在3×3的棋盘，摆有八个棋子，每个棋子上标有1至8的某一数字，不同棋子上标的数字
- 今天继续学习Django，今天主要掌握两个小点一、如果为Django项目中引入静态文件1、先要在project目录下创建static的目录，
- mybatis分页插件pageHelper详解及简单实例工作的框架spring springmvc mybatis3首先使用分页插件必须先引
- 早就听说requests的库的强大，只是还没有接触，今天接触了一下，发现以前使用urllib，urllib2等方法真是太搓了……这里写些简单
- 准备工作： ① 首先要会使用ThinkPHP这个框架 ② 最好有些ajax的基础（可以去看下小飞的另外一篇博文：Ajax实时验证"
- 网站发布到IIS后，发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。于是跟踪http请求，发现woff字体请求出现GE
- 本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码。分享给大家供大家参考。具体如下：一个随屏幕自动滚动的右下角广告代码，这里请注意
- split() 通过指定分隔符对字符串进行切片，如果第二个参数 num 有指定值，则分割为 num+1 个子字符串。split()方法定义于
- 我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB。今天查看了MyISAM与InnoDB的区别，在该文中的第七条“MyISA
- 看代码吧~def find_all_index(arr, item): return [i for i, a in
- JS提供两个截取字符串的方法,分别是:slice()和substring()slice和substring都可以接受一个或两个参数,第1个参
- Notes怀疑模型梯度 * ，想打印模型 loss 对各权重的导数看看。如果如果fit来训练的话，可以用keras.callbacks.Ten
- 在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣，在阅读《超越CSS：web设计艺术精髓》这本书的时候，发现原来we
- 前言：[学习SQL SERVER 2005系列]准备把学习2005的一些心得整理出来，和大家分享，共同学习一起提高。sql2005 精简版下
- /* * zoomCheck */jQuery(function($){ var dCheck = $(&q
