使用vue+element-ui+ajax这几样技术，实现一个表格的实例

下面我就为大家分享一篇vue+element-ui+ajax实现一个表格的实例，具有很好的参考价值，希望对大家有所帮助。

实例如下：

 
 

 


 
 
  
  
  {{ scope.row.take }}
  
  
 
  
  
  {{ scope.row.startTime }}
  
  
 
  
  
  {{ scope.row.finishTime }}
  
 
 
  
  编辑
  删除
  
 
 

 
 
 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);
  }
 }
 })

效果图：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

javascript原生封装一个淡入淡出效果的函数测试实例代码

react-native-video实现视频全屏播放的方法

vue实现树形菜单效果

以上就是使用vue+element-ui+ajax这几样技术，实现一个表格的实例的详细内容，更多请关注php中文网其它相关文章！