vue+element-ui+ajax实现一个表格的实例


Posted in Javascript onMarch 09, 2018

实例如下:

<!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>

效果图:

vue+element-ui+ajax实现一个表格的实例

以上这篇vue+element-ui+ajax实现一个表格的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
简单实现js页面切换功能
Jan 10 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 #Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 #Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
实例浅析js的this
2016/12/11 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python中enumerate函数代码解析
2017/10/31 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python线程的几种创建方式详解
2019/08/29 Python
python 实现单通道转3通道
2019/12/03 Python
python 实现按对象传值
2019/12/26 Python
Python龙贝格法求积分实例
2020/02/29 Python
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
干部鉴定材料
2014/05/18 职场文书
工作年限证明模板
2014/11/01 职场文书
项目经理岗位职责
2015/01/31 职场文书
大班上学期个人总结
2015/02/13 职场文书
新郎婚礼致辞
2015/07/27 职场文书