Heim > Artikel > Web-Frontend > Verwenden Sie vue+element-ui+ajax, um ein Beispiel einer Tabelle zu implementieren
Verwenden Sie vue+element-ui+ajax, um ein Beispiel einer Tabelle zu implementieren
- 亚连Original
- 2018-05-31 15:41:003014Durchsuche
Im Folgenden werde ich Ihnen ein Beispiel für die Implementierung eines Formulars mit vue+element-ui+ajax vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.
Das Beispiel sieht wie folgt aus:
<!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>
<p 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>
<p slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</p>
</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>
</p>
<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>Rendering:
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Javascript kapselt nativ einen Funktionstest-Beispielcode für Ein- und Ausblendeffekte
react-native -video realisiert die Video-Vollbild-Wiedergabemethode
Vue implementiert den Baummenüeffekt
Das obige ist der detaillierte Inhalt vonVerwenden Sie vue+element-ui+ajax, um ein Beispiel einer Tabelle zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!