<!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实现一个表格的实例的更多相关文章

  1. VUE+Element UI实现简单的表格行内编辑效果

    原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...

  2. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  6. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  7. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  8. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  9. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

随机推荐

  1. c语言实现基本的数据结构（二） 链表（包括链表的三种简单排序算法）

    #include "stdafx.h" #include <stdlib.h> //创建一个节点,data为value,指向NULL Node* Create(int ...

  2. vue 中 axios 使用

    前言 在对接接口的时候时常会有传参问题调调试试很多,是 JSON.From Data还是 URL 传参,没有搞清楚就浪费很多时间. 本文中就结合 axios 来说明这些的区别,以便在以后工作更好对接. ...

  3. 《BUG创造队》第三次作业：团队项目原型设计与开发

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验六 团队作业3:团队项目原型设计与开发 团队名称 BUG创造队 作业学习目标 ①掌握软件原型开发技术:②学会使用软件原型 ...

  4. selenium获取元素信息方法(转载)

    1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:location 解释:首先查找到你要获取元素的,然后调用locati ...

  5. 服务端高并发分布式架构演进之路 转载，原文地址：https://segmentfault.com/a/1190000018626163

    1. 概述 本文以淘宝作为例子,介绍从一百个到千万级并发情况下服务端的架构的演进过程,同时列举出每个演进阶段会遇到的相关技术,让大家对架构的演进有一个整体的认知,文章最后汇总了一些架构设计的原则. 特 ...

  6. forword动作

    forword动作   服务器内部跳转指令 语法为: <jsp:forword page = "目标页面"> 等同于:request.getRequestDispatc ...

  7. SOA与ESB,微服务与API网关

    SOA与ESB,微服务与API网关 SOA: ESB: 微服务: API网关: 参考资料: 1.漫画微服务,http://www.sohu.com/a/221400925_100039689 2.SO ...

  8. L1434滑雪

    一,看题 1,这个长度怎么算的. 从它自己数,可以走下去的位置. 2,这个题的衣服怎么披上去呀. 3,搜索目标,状态. 肯定要用坐标,不然怎么搜索. 4,在前期还是多写把. 5,我靠这个点还是随机的& ...

  9. 开源项目 02 HttpLib

    using JumpKick.HttpLib; using Newtonsoft.Json; using System; using System.Collections.Generic; using ...

  10. 嘉立创制作PCB流程

    现在做板子基本上是选择嘉立创和捷配,今天看一下嘉立创如何下PCB和STM贴片单,改天再写一下捷配的下单 我喜欢用下单助手,比较方便 注意需要把自己的板子的PCB文件用压缩软件生成压缩包文件,名字自己取 ...