使用Vue.js制作仿Metronic高级表格（一）静态设计

Metronic高级表格是Metonic框架中自行实现的表格，其底层是Datatables，本教程将主要使用Vue实现交互部分，使用Bootstrap做样式库，jQuery做部分用户交互（弹窗）。

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

需要注意的是，Vue最好使用开发版本

一、需求和原型设计

产品目标是一个图书管理表格，书籍字段：书籍名称、分类、价格、更新时间。

需求：

① 书籍信息的增删改

② 分页功能，并且能自行选择页容量

③ 能展示 根据任一字段进行关键字匹配后的条目

④ 能自动保存本次操作的数据

原型：

原型说明：

① 页码区提供 上一页、页码列表、下一页 按钮

② 点击修改时，上部表单内容为原始数据，“添加”按钮变为“修改”，此时点击修改，才将数据保存生效；如果此时点击重新填写则是放弃修改。

③ 点击删除时弹框提示是否删除

二、准备工作

① 搭建运行环境

不建议使用浏览器直接打开网页，建议搭建一个Web环境来进行测试。

建议使用WAMP、XAMPP等集成环境，安装简便易于操作

② 引入各类库

[html]  view plain  copy

 

1. <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
2. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  
3. <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>  
4. <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
5. <script src="/static/vue.js"></script>  

注意vue.js的路径，下载到本地进行引入（此处使用的是web绝对路径'/static/vue.js'）

③ 进行最简单的Vue测试

[html]  view plain  copy

 

1. <div id="content">  
2.     {{msg}}  
3. </div>  

[html]  view plain  copy

 

1. <script>  
2.     window.onload = function () {  
3.         var vm = new Vue({  
4.             el:'#content',  
5.             data: {  
6.                 msg:'hello vue'  
7.             }  
8.         });  
9.     }  
10. </script>  

值得注意的是，el选项不能为‘body’或‘html’，否则会提示警告信息并且不能正常渲染。

生产版本的vue则不会产生警告信息，并且不能正常渲染。

三、数据输入（添加、修改）

按照原型图：

写出表单：

[html]  view plain  copy

 

1. <form action="" class="col-md-4 col-md-offset-4 form-horizontal">  
2.     <div class="form-group">  
3.         <label class="col-md-3 control-label" >书名: </label>  
4.         <div class="col-md-9">  
5.             <input type="text" class="form-control" placeholder="请输入书名">  
6.         </div>  
7.     </div>  
8.     <div class="form-group">  
9.         <label class="col-md-3 control-label" >类别: </label>  
10.         <div class="col-md-9" >  
11.             <select class="form-control">  
12.                 <option value="0">科技</option>  
13.                 <option value="1">文化</option>  
14.                 <option value="2">经济</option>  
15.             </select>  
16.         </div>  
17.     </div>  
18.     <div class="form-group">  
19.         <label class="col-md-3 control-label" >价格: </label>  
20.         <div class="col-md-9">  
21.             <input type="text" class="form-control" placeholder="请输入价格">  
22.         </div>  
23.     </div>  
24.     <div class="form-group text-right">  
25.         <input type="button" class="btn btn-primary" value="添加">  
26.         <input type="reset" class="btn btn-default" value="重新填写">  
27.     </div>  
28. </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’

四、展示

① 表头

[html]  view plain  copy

 

1. <div class="form-horizontal">  
2.     <div class="form-group col-md-6 ">  
3.         <label class="col-md-2 control-label" >每页</label>  
4.         <div class="col-md-3">  
5.             <select class="form-control">  
6.                 <option value="5">5条</option>  
7.                 <option value="10">10条</option>  
8.                 <option value="15">15条</option>  
9.                 <option value="20">20条</option>  
10.             </select>  
11.         </div>  
12.     </div>  
13.     <div class="form-group col-md-6">  
14.         <label class="col-md-3 col-md-offset-3 control-label" >搜索: </label>  
15.         <div class="col-md-6">  
16.             <input type="text" class="form-control" placeholder="请输入关键字">  
17.         </div>  
18.     </div>  
19. </div>  

这部分较简单，这里依然使用到了‘form-horizontal’来调整布局

② 主体

[html]  view plain  copy

 

1. <table class="table table-bordered table-hover table-striped">  
2.     <thead>  
3.     <tr>  
4.         <td width="50">序号</td>  
5.         <td>书名</td>  
6.         <td>类别</td>  
7.         <td>价格(元)</td>  
8.         <td>更新时间</td>  
9.         <td width="140">操作</td>  
10.     </tr>  
11.     </thead>  
12.     <tbody >  
13.     <tr>  
14.         <td>1</td>  
15.         <td>标准日本语</td>  
16.         <td>文化</td>  
17.         <td>¥ 31.00</td>  
18.         <td>2017年04月16日14:26:43</td>  
19.         <td>  
20.             <button class="btn btn-info btn-xs">  
21.                 <i class="fa fa-pencil"></i>  
22.                 修改  
23.             </button>  
24.             <button class="btn btn-danger btn-xs">  
25.                 <i class="fa fa-trash"></i>  
26.                 删除  
27.             </button>  
28.         </td>  
29.     </tr>  
30.     </tbody>  
31. </table>  

① ‘table-bordered‘ 添加单元格的边框

② ’table-hover‘ 鼠标悬停一行有样式

③ 'table-striped' 斑马线效果

五、删除

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

模态框：

[html]  view plain  copy

 

1. <div id="general_dialog" class="modal fade bs-example-modal-sm" role="dialog">  
2.     <div class="modal-dialog modal-sm" role="document">  
3.         <div class="modal-content">  
4.             <div class="modal-header">  
5.                 <button class="close" data-dismiss="modal" >&times;</button>  
6.                 <h4 class="modal-title">提示</h4>  
7.             </div>  
8.             <div class="modal-body">  
9.                 您确认要删除xxx吗?  
10.             </div>  
11.             <div class="modal-footer text-right">  
12.                 <button class="btn btn-default" data-dismiss="modal">取消</button>  
13.                 <button class="btn btn-danger" data-dismiss="modal">删除</button>  
14.             </div>  
15.         </div>  
16.     </div>  
17. </div>  

这样写，初始是不会出来的，在删除按钮元素上添加：

[html]  view plain  copy

 

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

那么点击按钮的时候，就会弹出来（此处需要引入bootstrap.js哦）

① ‘fade‘ 表示模态框是淡入淡出的

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

③ ’&times;‘是一个实体标记，代表是 ×

五步完成后，样子是：