使用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则不会产生警告信息，而且不能正常渲染。

三、数据输入（加入、改动）

依照原型图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVGlueUppYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

写出表单：

<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来调整布局

② 主体

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVGlueUppYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<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 斑马线效果

五、删除

删除弹窗，原型图没给出。所以自行发挥想象力。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVGlueUppYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

模态框：

<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高级表格（二）数据渲染