小程序究竟是什么_Vue.js仿Metronic高级表格(一)

2021-01-12 12:03 admin
Vue.js仿Metronic高级表格(一)静态设计       这篇文章主要为大家详细介绍了Vue.js仿Metronic高级表格的静态设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

需要注意的是,Vue最好使用

一、需求和原型设计

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

需求:

① 书籍信息的增删改

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

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

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

原型:


原型说明:

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

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

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

二、准备工作

① 搭建运行环境

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

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

② 引入各类库

 link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
 link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
 script src="jquery/2.2.4/jquery.min.js" /script 
 script src="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 

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

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

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

按照原型图:

写出表单:

 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'

四、展示

① 表头


 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'来调整布局

② 主体


 table 
 thead 
 td width="50" 序号 /td 
 td 书名 /td 
 td 类别 /td 
 td 价格(元) /td 
 td 更新时间 /td 
 td width="140" 操作 /td 
 /tr 
 /thead 
 tbody 
 td 1 /td 
 td 标准日本语 /td 
 td 文化 /td 
 td 31.00 /td 
 td 2017年04月16日 /td 
 button 
 i /i 
 /button 
 button 
 i /i 
 /button 
 /td 
 /tr 
 /tbody 
 /table 

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

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

③ 'table-striped' 斑马线效果

五、删除

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


模态框:

 div id="general_dialog" role="dialog" 
 div role="document" 
 div 
 div 
 button data-dismiss="modal" times; /button 
 h4 提示 /h4 
 /div 
 div 
 您确认要删除xxx吗 
 /div 
 div 
 button data-dismiss="modal" 取消 /button 
 button data-dismiss="modal" 删除 /button 
 /div 
 /div 
 /div 
 /div 

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

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

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

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

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

③ ' times;‘是一个实体标记,代表是 ×

五步完成后,样子是:


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

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