Vue.js仿Metronic高级表格(一)静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables,本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库,jQuery做部分用户交互(弹窗)。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网络空间、营销软件、网站建设、木兰网站维护、网站推广。
使用到的库:Vue 2.0,Bootstrap3、jQuery2、font-awesome4,均可在cdn下载
需要注意的是,Vue最好使用开发版本
一、需求和原型设计
产品目标是一个图书管理表格,书籍字段:书籍名称、分类、价格、更新时间。
需求:
① 书籍信息的增删改
② 分页功能,并且能自行选择页容量
③ 能展示 根据任一字段进行关键字匹配后的条目
④ 能自动保存本次操作的数据
原型:
原型说明:
① 页码区提供 上一页、页码列表、下一页 按钮
② 点击修改时,上部表单内容为原始数据,“添加”按钮变为“修改”,此时点击修改,才将数据保存生效;如果此时点击重新填写则是放弃修改。
③ 点击删除时弹框提示是否删除
二、准备工作
① 搭建运行环境
不建议使用浏览器直接打开网页,建议搭建一个Web环境来进行测试。
建议使用WAMP、XAMPP等集成环境,安装简便易于操作
② 引入各类库
注意vue.js的路径,下载到本地进行引入(此处使用的是web绝对路径'/static/vue.js')
③ 进行最简单的Vue测试
{{msg}}
值得注意的是,el选项不能为‘body'或‘html',否则会提示警告信息并且不能正常渲染。
生产版本的vue则不会产生警告信息,并且不能正常渲染。
三、数据输入(添加、修改)
按照原型图:
写出表单:
值得关注的是:
① 'form-control' 这个class样式会独占一行。要使label和input在一行,利用bootstrap的栅格化布局即可,经过调整得出3:9的布局是比较合适的。
② 'form-horizontal' 样式作用于form元素可以美化表格。它可以让每个form-group之间留出间隙,变得不那么紧凑;还可以使label的内容居中。
③ ‘col-md-4 col-md-offset-4' 可以使一个元素居中,并且宽度是‘col-md-4'
四、展示
① 表头
这部分较简单,这里依然使用到了‘form-horizontal'来调整布局
② 主体
序号 | 书名 | 类别 | 价格(元) | 更新时间 | 操作 |
1 | 标准日本语 | 文化 | ¥ 31.00 | 2017年04月16日14:26:43 |
① ‘table-bordered‘ 添加单元格的边框
② 'table-hover‘ 鼠标悬停一行有样式
③ 'table-striped' 斑马线效果
五、删除
删除弹窗,原型图没给出,所以自行发挥想象力。
模态框:
这样写,初始是不会出来的,在删除按钮元素上添加:
data-toggle="modal" data-target="#general_dialog"
那么点击按钮的时候,就会弹出来(此处需要引入bootstrap.js哦)
① ‘fade‘ 表示模态框是淡入淡出的
② 'bs-example-modal-sm' 是指模态框的大小是'sm‘
③ 'ב是一个实体标记,代表是 ×
五步完成后,样子是:
(额这个录屏的工具貌似吧table-striped的效果抹去了。。。)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文标题:Vue.js仿Metronic高级表格(一)静态设计
网站路径:http://azwzsj.com/article/jhdopd.html