Vue.js仿Metronic高级表格(一)静态设计

作者: 日期:2019-08-15

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的路径,下载到本地进行引入

③ 进行最简单的vue测试

 div id="content" 
 {{msg}} 
 /div 
首页
电话
短信
联系