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

2019-11-19 16:48:44

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

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

一、需求和原型設計

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

需求：

① 書籍信息的增刪改

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

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

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

原型：

原型說明：

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

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

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

二、準備工作

① 搭建運行環(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ù)輸入（添加、修改）

按照原型圖：

寫出表單：

<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>

值得關注的是：

① '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'

四、展示

① 表頭

<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="請輸入關鍵字">   </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>價格(元)</td>   <td>更新時間</td>   <td width="140">操作</td>  </tr>  </thead>  <tbody >  <tr>   <td>1</td>   <td>標準日本語</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‘ 鼠標懸停一行有樣式

③ '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" >×</button>     <h4 class="modal-title">提示</h4>    </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‘

③ '×‘是一個實體標記，代表是 ×

五步完成后，樣子是：