vue+element-ui+ajax实现一个表格的实例
作者：MrZero404 时间：2024-04-10 10:34:27
实例如下：
<!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>
效果图：
来源：http://blog.csdn.net/mrzero404/article/details/78899806
标签：vue,elementui,ajax,表格
0
投稿猜你喜欢
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2023-11-14 22:08:47
阿里云OSS实践文件直传基于服务端
2024-05-13 09:35:27
SQL Server 2005数据库批量更新解决办法
2009-04-11 16:12:00
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2021-04-23 12:41:26
asp如何刪除客户端的Cookies？
2010-05-18 18:25:00
python的命名规则知识点总结
2023-08-22 09:48:21
配置 SQLServer2005 以允许远程连接
2024-01-18 19:11:01
Django使用Mysql数据库已经存在的数据表方法
2023-07-21 15:24:59
mysql 不等于 符号写法
2024-01-22 07:03:06
基于scrapy的redis安装和配置方法
2022-07-15 17:26:56
Python如何优雅删除字符列表空字符及None元素
2023-10-26 19:17:00
Python利用zhdate模块实现农历日期处理
2023-03-07 22:10:20
MYSQL数据库表设计与优化(一)
2010-10-25 19:50:00
Win10下安装CUDA11.0+CUDNN8.0+tensorflow-gpu2.4.1+pytorch1.7.0+paddlepaddle-gpu2.0.0
2022-05-08 19:29:32
Python读取配置文件-ConfigParser的二次封装方法
2023-06-15 09:19:58
mysql中group by与having合用注意事项分享
2024-01-15 02:24:55
使用python将多个excel文件合并到同一个文件的方法
2023-01-14 18:53:42
MySQL联表查询基本操作之left-join常见的坑
2024-01-14 20:49:22
python高并发异步服务器核心库forkcore使用方法
2021-12-04 18:38:24
jenkins自动构建发布vue项目的方法步骤
2024-04-30 10:47:14
