使用Vue.js制作仿Metronic高級表格（一）靜態設計

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

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

須要注意的是，Vue最好使用開發版本號

一、需求和原型設計

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

需求：

① 書籍信息的增刪改

② 分頁功能。而且能自行選擇頁容量

③ 能展示 依據任一字段進行keyword匹配后的條目

④ 能自己主動保存本次操作的數據

原型：

原型說明：

① 頁碼區提供 上一頁、頁碼列表、下一頁 button

② 點擊改動時。上部表單內容為原始數據。“加入”button變為“改動”。此時點擊改動，才將數據保存生效；假設此時點擊又一次填寫則是放棄改動。

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

二、准備工作

① 搭建執行環境

不建議使用瀏覽器直接打開網頁。建議搭建一個Web環境來進行測試。

建議使用WAMP、XAMPP等集成環境。安裝簡便易於操作

② 引入各類庫

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" 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。否則會提示警告信息而且不能正常渲染。

生產版本號的vue則不會產生警告信息，而且不能正常渲染。

三、數據輸入（加入、改動）

依照原型圖：

寫出表單：

<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">經濟</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的柵格化布局就可以，經過調整得出3：9的布局是比較合適的。

② form-horizontal 樣式作用於form元素能夠美化表格。它能夠讓每一個form-group之間留出間隙，變得不那么緊湊；還能夠使label的內容居中。

③ 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="請輸入keyword">
        </div>
    </div>
</div>

這部分較簡單。這里依舊使用到了form-horizontal來調整布局

② 主體

<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 斑馬線效果

五、刪除

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

模態框：

<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">
                您確認要刪除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"

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

① fade 表示模態框是淡入淡出的

② bs-example-modal-sm 是指模態框的大小是’sm‘

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

五步完畢后，樣子是：

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

原文鏈接：TinyJian's Blog

下一篇：使用Vue.js制作仿Metronic高級表格（二）數據渲染