溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

發(fā)布時間：2020-09-22 17:20:20 來源：腳本之家 閱讀：223 作者：TinyJian 欄目：web開發(fā)

Metronic高級表格是Metonic框架中自行實現(xiàn)的表格，其底層是Datatables，本教程將主要使用Vue實現(xiàn)交互部分，使用Bootstrap做樣式庫，jQuery做部分用戶交互（彈窗）。

使用到的庫：Vue 2.0，Bootstrap3、jQuery2、font-awesome4，均可在CDN下載

需要注意的是，Vue最好使用開發(fā)版本

一、需求和原型設(shè)計

產(chǎn)品目標(biāo)是一個圖書管理表格，書籍字段：書籍名稱、分類、價格、更新時間。

需求：

① 書籍信息的增刪改

② 分頁功能，并且能自行選擇頁容量

③ 能展示 根據(jù)任一字段進行關(guān)鍵字匹配后的條目

④ 能自動保存本次操作的數(shù)據(jù)

原型：

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

原型說明：

① 頁碼區(qū)提供 上一頁、頁碼列表、下一頁 按鈕

② 點擊修改時，上部表單內(nèi)容為原始數(shù)據(jù)，“添加”按鈕變?yōu)椤靶薷摹保藭r點擊修改，才將數(shù)據(jù)保存生效；如果此時點擊重新填寫則是放棄修改。

③ 點擊刪除時彈框提示是否刪除

二、準(zhǔn)備工作

① 搭建運行環(huán)境

不建議使用瀏覽器直接打開網(wǎng)頁，建議搭建一個Web環(huán)境來進行測試。

建議使用WAMP、XAMPP等集成環(huán)境，安裝簡便易于操作

② 引入各類庫

<link  rel="stylesheet"> 
<link  rel="stylesheet"> 
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="/static/vue.js"></script>

注意vue.js的路徑，下載到本地進行引入（此處使用的是web絕對路徑'/static/vue.js'）

③ 進行最簡單的Vue測試

<div id="content"> 
 {{msg}} 
</div> 

<script> 
 window.onload = function () { 
  var vm = new Vue({ 
   el:'#content', 
   data: { 
    msg:'hello vue' 
   } 
  }); 
 } 
</script>

值得注意的是，el選項不能為‘body'或‘html'，否則會提示警告信息并且不能正常渲染。

生產(chǎn)版本的vue則不會產(chǎn)生警告信息，并且不能正常渲染。

三、數(shù)據(jù)輸入（添加、修改）

按照原型圖：

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

寫出表單：

<form action="" class="col-md-4 col-md-offset-4 form-horizontal"> 
 <div class="form-group"> 
  <label class="col-md-3 control-label" >書名: </label> 
  <div class="col-md-9"> 
   <input type="text" class="form-control" placeholder="請輸入書名"> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label class="col-md-3 control-label" >類別: </label> 
  <div class="col-md-9" > 
   <select class="form-control"> 
    <option value="0">科技</option> 
    <option value="1">文化</option> 
    <option value="2">經(jīng)濟</option> 
   </select> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label class="col-md-3 control-label" >價格: </label> 
  <div class="col-md-9"> 
   <input type="text" class="form-control" placeholder="請輸入價格"> 
  </div> 
 </div> 
 <div class="form-group text-right"> 
  <input type="button" class="btn btn-primary" value="添加"> 
  <input type="reset" class="btn btn-default" value="重新填寫"> 
 </div> 
</form>

值得關(guān)注的是：

① 'form-control' 這個class樣式會獨占一行。要使label和input在一行，利用bootstrap的柵格化布局即可，經(jīng)過調(diào)整得出3：9的布局是比較合適的。

② 'form-horizontal' 樣式作用于form元素可以美化表格。它可以讓每個form-group之間留出間隙，變得不那么緊湊；還可以使label的內(nèi)容居中。

③ ‘col-md-4 col-md-offset-4' 可以使一個元素居中，并且寬度是‘col-md-4'

四、展示

① 表頭

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

<div class="form-horizontal"> 
 <div class="form-group col-md-6 "> 
  <label class="col-md-2 control-label" >每頁</label> 
  <div class="col-md-3"> 
   <select class="form-control"> 
    <option value="5">5條</option> 
    <option value="10">10條</option> 
    <option value="15">15條</option> 
    <option value="20">20條</option> 
   </select> 
  </div> 
 </div> 
 <div class="form-group col-md-6"> 
  <label class="col-md-3 col-md-offset-3 control-label" >搜索: </label> 
  <div class="col-md-6"> 
   <input type="text" class="form-control" placeholder="請輸入關(guān)鍵字"> 
  </div> 
 </div> 
</div>

這部分較簡單，這里依然使用到了‘form-horizontal'來調(diào)整布局

② 主體

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

<table class="table table-bordered table-hover table-striped"> 
 <thead> 
 <tr> 
  <td width="50">序號</td> 
  <td>書名</td> 
  <td>類別</td> 
  <td>價格(元)</td> 
  <td>更新時間</td> 
  <td width="140">操作</td> 
 </tr> 
 </thead> 
 <tbody > 
 <tr> 
  <td>1</td> 
  <td>標(biāo)準(zhǔn)日本語</td> 
  <td>文化</td> 
  <td>¥ 31.00</td> 
  <td>2017年04月16日14:26:43</td> 
  <td> 
   <button class="btn btn-info btn-xs"> 
    <i class="fa fa-pencil"></i> 
    修改 
   </button> 
   <button class="btn btn-danger btn-xs"> 
    <i class="fa fa-trash"></i> 
    刪除 
   </button> 
  </td> 
 </tr> 
 </tbody> 
</table>

① ‘table-bordered‘ 添加單元格的邊框

② 'table-hover‘ 鼠標(biāo)懸停一行有樣式

③ 'table-striped' 斑馬線效果

五、刪除

刪除彈窗，原型圖沒給出，所以自行發(fā)揮想象力。

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

模態(tài)框：

<div id="general_dialog" class="modal fade bs-example-modal-sm" role="dialog"> 
 <div class="modal-dialog modal-sm" role="document"> 
  <div class="modal-content"> 
   <div class="modal-header"> 
    <button class="close" data-dismiss="modal" >&times;</button> 
    <h5 class="modal-title">提示</h5> 
   </div> 
   <div class="modal-body"> 
    您確認要刪除xxx嗎? 
   </div> 
   <div class="modal-footer text-right"> 
    <button class="btn btn-default" data-dismiss="modal">取消</button> 
    <button class="btn btn-danger" data-dismiss="modal">刪除</button> 
   </div> 
  </div> 
 </div> 
</div>

這樣寫，初始是不會出來的，在刪除按鈕元素上添加：

data-toggle="modal" data-target="#general_dialog" 

那么點擊按鈕的時候，就會彈出來（此處需要引入bootstrap.js哦）

① ‘fade‘ 表示模態(tài)框是淡入淡出的

② 'bs-example-modal-sm' 是指模態(tài)框的大小是'sm‘

③ '&times;‘是一個實體標(biāo)記，代表是 ×

五步完成后，樣子是：

Vue.js仿Metronic高級表格（一）靜態(tài)設(shè)計

（額這個錄屏的工具貌似吧table-striped的效果抹去了。。。）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手