vue+element-ui+ajax实现一个表格的实例
实例如下：
<!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），包括了vue实现日历表格（element-ui）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下 效果如图： html：后面的日期是循环出来的 这里注意一下:key="index + item" ，之前我的key设置的只等于index，然后到了后面数据删选的时候就各种出错，
-
本文向大家介绍vue+element UI实现树形表格，包括了vue+element UI实现树形表格的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue+element UI实现树形表格的具体代码，供大家参考，具体内容如下 一、在component文件夹下新建如下treeTable文件夹，里面有2个文件： eval.js:将数据转换成树形数据 index.vue:树形表格组件 二
-
本文向大家介绍vue+Element-ui实现登录注册表单，包括了vue+Element-ui实现登录注册表单的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码，供大家参考，具体内容如下 登录注册表单验证 通过Element-ui的表单实现登录注册的表单验证 效果图如下 注册 登录表单 登录的实现，需要通过手机号或者邮箱进行登录,验
-
本文向大家介绍vue+element UI实现树形表格带复选框的示例代码，包括了vue+element UI实现树形表格带复选框的示例代码的使用技巧和注意事项，需要的朋友参考一下 一：在component文件夹下新建如下treeTable文件夹，里面有2个文件： eval.js:将数据转换成树形数据 index.vue:树形表格组件 二：在需要的地方引入该组件： 例如：在component文件夹下
-
本文向大家介绍element-ui 表格实现单元格可编辑的示例，包括了element-ui 表格实现单元格可编辑的示例的使用技巧和注意事项，需要的朋友参考一下 如下所示： 以上这篇element-ui 表格实现单元格可编辑的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍VUE+Element UI实现简单的表格行内编辑效果的示例的代码，包括了VUE+Element UI实现简单的表格行内编辑效果的示例的代码的使用技巧和注意事项，需要的朋友参考一下 原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 效果示例地址 根据原理自定义效果 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。