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

更新時(shí)間：2021年09月10日 11:48:45 作者：TinyJian

這篇文章主要為大家詳細(xì)介紹了Vue.js仿Metronic高級表格的靜態(tài)設(shè)計(jì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

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

需求：

① 書籍信息的增刪改

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

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

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

原型：

原型說明：

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

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

③ 點(diǎn)擊刪除時(shí)彈框提示是否刪除

二、準(zhǔn)備工作

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

不建議使用瀏覽器直接打開網(wǎng)頁，建議搭建一個(gè)Web環(huán)境來進(jì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的路徑，下載到本地進(jìn)行引入（此處使用的是web絕對路徑'/static/vue.js'）

③ 進(jìn)行最簡單的Vue測試

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

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

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

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

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

按照原型圖：

寫出表單：

<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)濟(jì)</option> 
   </select> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label class="col-md-3 control-label" >價(jià)格: </label> 
  <div class="col-md-9"> 
   <input type="text" class="form-control" placeholder="請輸入價(jià)格"> 
  </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' 這個(gè)class樣式會獨(dú)占一行。要使label和input在一行，利用bootstrap的柵格化布局即可，經(jīng)過調(diào)整得出3：9的布局是比較合適的。

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

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

四、展示

① 表頭

<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)整布局

② 主體

<table class="table table-bordered table-hover table-striped"> 
 <thead> 
 <tr> 
  <td width="50">序號</td> 
  <td>書名</td> 
  <td>類別</td> 
  <td>價(jià)格(元)</td> 
  <td>更新時(shí)間</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ā)揮想象力。

模態(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> 
    <h4 class="modal-title">提示</h4> 
   </div> 
   <div class="modal-body"> 
    您確認(rèn)要刪除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"

那么點(diǎn)擊按鈕的時(shí)候，就會彈出來（此處需要引入bootstrap.js哦）

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

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

③ '×‘是一個(gè)實(shí)體標(biāo)記，代表是 ×

五步完成后，樣子是：