编程 Javascript

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实现一个表格的实例

- Author -

MrZero404

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

asp批量修改记录的代码

Jun 25 Javascript

jquery Firefox3.5中操作select的问题

Jul 10 Javascript

JavaScript作用域与作用域链深入解析

Dec 06 Javascript

重写document.write实现无阻塞加载js广告(补充)

Dec 12 Javascript

jQuery验证元素是否为空的两种常用方法

Mar 17 Javascript

JavaScript模拟push

Mar 06 Javascript

KnockoutJS 3.X API 第四章之click绑定

Oct 10 Javascript

js实现移动端编辑添加地址【模仿京东】

Apr 28 Javascript

微信小程序实现自动定位功能

Oct 31 Javascript

Vue 页面状态保持页面间数据传输的一种方法(推荐)

Nov 01 Javascript

Vue中inheritAttrs的使用实例详解

Dec 31 Vue.js

vue如何实现关闭对话框后刷新列表

Apr 08 Vue.js

使用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