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 相关文章推荐
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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 CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Python中的面向对象编程详解(下)
2015/04/13 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python多继承顺序实例分析
2018/05/26 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
服务生自我鉴定
2014/01/22 职场文书
大学生作弊检讨书
2014/02/19 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014国庆节标语口号
2014/09/19 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
好好学习保证书
2015/02/26 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
MySQL添加索引特点及优化问题
2022/07/23 MySQL