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

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

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

一、需求和原型设计

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

需求：

① 书籍信息的增删改

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

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

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

原型：

原型说明：

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

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

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

二、准备工作

① 搭建运行环境

不建议使用浏览器直接打开网页，建议搭建一个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="请输入关键字"> 
  </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" 

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

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

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

③ 'ב是一个实体标记，代表是 ×

五步完成后，样子是：

（额这个录屏的工具貌似吧table-striped的效果抹去了。。。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue.js  # Metronic  # 表格  # vue.js表格组件开发的实例详解  # 基于Vue.js的表格分页组件  # vue.js+Element实现表格里的增删改查  # vue.js表格分页示例  # vue.js 表格分页ajax 异步加载数据  # Javascript vue.js表格分页  # ajax异步加载数据  # Vue 固定头 固定列 点击表头可排序的表格组件  # vue.js实现表格合并示例代码  # vue2.0结合DataTable插件实现表格动态刷新的方法详解  # Vue.js实现表格动态增加删除的方法（附源码下载）  # 的是  # 是一个  # 更新时间  # 请输入  # 表单  # 不能正常  # 模态  # 日本语  # 就会  # 运行环境  # 还可以  # 鼠标  # 下一页  # 上一页  # 则是  # 是指  # 每页  # 这部  # 弹出  # 分页 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php 三元运算符实例详细介绍  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  如何快速搭建高效WAP手机网站？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Laravel怎么实现模型属性的自动加密  如何快速启动建站代理加盟业务？  如何用花生壳三步快速搭建专属网站？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何在IIS中新建站点并配置端口与物理路径？  西安专业网站制作公司有哪些,陕西省建行官方网站？  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  b2c电商网站制作流程,b2c水平综合的电商平台？  Laravel如何集成Inertia.js与Vue/React？（安装配置）  深圳网站制作的公司有哪些,dido官方网站？  微信公众帐号开发教程之图文消息全攻略  Laravel Fortify是什么，和Jetstream有什么关系  如何在IIS中新建站点并解决端口绑定冲突？  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  微信小程序 配置文件详细介绍  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  *服务器网站为何频现安全漏洞？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  如何为不同团队 ID 动态生成多个非值班状态按钮  Laravel怎么判断请求类型_Laravel Request isMethod用法  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  zabbix利用python脚本发送报警邮件的方法  个人网站制作流程图片大全,个人网站如何注销？  图册素材网站设计制作软件,图册的导出方式有几种？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  nginx修改上传文件大小限制的方法  在线制作视频网站免费,都有哪些好的动漫网站？  如何用腾讯建站主机快速创建免费网站？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  如何在七牛云存储上搭建网站并设置自定义域名？  香港服务器选型指南：免备案配置与高效建站方案解析  如何在 React 中条件性地遍历数组并渲染元素  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  高防服务器租用如何选择配置与防御等级？  Laravel API资源类怎么用_Laravel API Resource数据转换  如何快速生成橙子建站落地页链接？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？