使用vue+element-ui+ajax這幾樣技術，實作一個表格的實例-js教程-PHP中文網

首頁

web前端

js教程

使用vue+element-ui+ajax這幾樣技術，實作一個表格的實例

亚连

May 31, 2018 pm 03:41 PM

實現科技

下面我就為大家分享一篇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>
 
<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:&#39;#app&#39;,
 data:{
  tableData: [],
  getUrl: &#39;http://localhost:8080/mytime/getTodayTomatos&#39;,
 },
 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>

登入後複製

#效果圖：

##上面是我整理給大家的，希望今後對大家有幫助。

javascript原生封裝一個淡入淡出效果的函數測試實例程式碼

react-native-video實作影片全螢幕播放的方法

vue實作樹狀選單效果

以上是使用vue+element-ui+ajax這幾樣技術，實作一個表格的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1230

Related knowledge

華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同

Stable Diffusion 3論文終於發布，架構細節大揭秘，對復現Sora有幫助？ Mar 06, 2024 pm 05:34 PM

StableDiffusion3的论文终于来了！这个模型于两周前发布，采用了与Sora相同的DiT（DiffusionTransformer）架构，一经发布就引起了不小的轰动。与之前版本相比，StableDiffusion3生成的图质量有了显著提升，现在支持多主题提示，并且文字书写效果也得到了改善，不再出现乱码情况。StabilityAI指出，StableDiffusion3是一个系列模型，其参数量从800M到8B不等。这一参数范围意味着该模型可以在许多便携设备上直接运行，从而显著降低了使用AI

DualBEV：大幅超越BEVFormer、BEVDet4D，開卷！ Mar 21, 2024 pm 05:21 PM

這篇論文探討了在自動駕駛中，從不同視角（如透視圖和鳥瞰圖）準確檢測物體的問題，特別是如何有效地從透視圖（PV）到鳥瞰圖（BEV）空間轉換特徵，這一轉換是透過視覺轉換（VT）模組實施的。現有的方法大致分為兩種策略：2D到3D和3D到2D轉換。 2D到3D的方法透過預測深度機率來提升密集的2D特徵，但深度預測的固有不確定性，尤其是在遠處區域，可能會引入不準確性。而3D到2D的方法通常使用3D查詢來採樣2D特徵，並透過Transformer學習3D和2D特徵之間對應關係的注意力權重，這增加了計算和部署的

自動駕駛與軌跡預測看這篇就夠了！ Feb 28, 2024 pm 07:20 PM

軌跡預測在自動駕駛中承擔著重要的角色，自動駕駛軌跡預測是指透過分析車輛行駛過程中的各種數據，預測車輛未來的行駛軌跡。作為自動駕駛的核心模組，軌跡預測的品質對於下游的規劃控制至關重要。軌跡預測任務技術堆疊豐富，需熟悉自動駕駛動/靜態感知、高精地圖、車道線、神經網路架構（CNN&GNN&Transformer）技能等，入門難度很高！許多粉絲期望能夠盡快上手軌跡預測，少踩坑，今天就為大家盤點下軌跡預測常見的一些問題和入門學習方法！入門相關知識1.預習的論文有沒有切入順序？ A：先看survey，p

PHP程式設計指南：實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App

掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些

See all articles

使用vue+element-ui+ajax這幾樣技術，實作一個表格的實例

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題