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

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

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

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

一、需求和原型设计

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

需求:

① 书籍信息的增删改

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

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

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

原型:

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


原型说明:

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

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

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

二、准备工作

① 搭建运行环境

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

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

② 引入各类库

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> <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="https://www.jb51.net/static/vue.js"></script>

注意vue.js的路径,下载到本地进行引入(此处使用的是web绝对路径'https://www.jb51.net/static/vue.js')

③ 进行最简单的Vue测试

<div> {{msg}} </div>

<script> window.onload = function () { var vm = new Vue({ el:'#content', data: { msg:'hello vue' } }); } </script>

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

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

三、数据输入(添加、修改)

按照原型图:

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

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

写出表单:

<form action=""> <div> <label >书名: </label> <div> <input type="text" placeholder="请输入书名"> </div> </div> <div> <label >类别: </label> <div > <select> <option value="0">科技</option> <option value="1">文化</option> <option value="2">经济</option> </select> </div> </div> <div> <label >价格: </label> <div> <input type="text" placeholder="请输入价格"> </div> </div> <div> <input type="button" value="添加"> <input type="reset" 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'

四、展示

① 表头


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

<div> <div> <label >每页</label> <div> <select> <option value="5">5条</option> <option value="10">10条</option> <option value="15">15条</option> <option value="20">20条</option> </select> </div> </div> <div> <label >搜索: </label> <div> <input type="text" placeholder="请输入关键字"> </div> </div> </div>

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

② 主体

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


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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wypsdf.html