Vue.js仿都市高级表(一)静态设计

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

Metronic高级表是Metonic框架下的自实现表，底层是Datatables。本教程主要用Vue实现交互部分，用Bootstrap作为样式库，用jQuery做一些用户交互(弹出)。

用过的库：Vue 2.0、Bootstrap3、jQuery2、font-awesome4，都可以从CDN下载

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

一、要求和原型设计

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

要求：

图书信息的添加、删除和修改

(2)寻呼功能，并可选择寻呼容量

(3)可以根据任意字段显示关键字匹配后的条目

该操作的数据可以自动保存

原型：

原型描述：

(1)页码区域提供了上一页、页码列表和下一页按钮

点击修改时，上表内容为原始数据，“添加”按钮变为“修改”。此时，点击〖修改〗按钮，保存数据并生效；如果此时再次点击填写，将放弃修改。

(3)点击删除弹出框提示是否删除

二、准备工作

(1)构建运营环境

不建议直接用浏览器打开网页。建议构建一个web环境进行测试。

建议使用WAMP、XAMPP等易于安装和操作的集成环境

介绍各种图书馆

link href=' https://cdn . bootcss.com/bootstrap/3 . 3 . 7/CSS/bootstrap . min . CSS ' rel='样式表' link href=' https://cdn . bootcss.com/font-awesome/4 . 7 . 0/CSS/font-awesome . min . CSS ' rel='样式表' script src=' http :3https://cdn . bootcss.com/jquery/2 . 2 . 4/jquery . min

进行最简单的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 ' title :/Label Div class=' col-MD-9 '输入类型=' text' class=' form-control '占位符='请输入书的标题'/Div/Div class=' form-group ' Label class=' col-MD-3 control-Label ' class 3:/Label Div class=' Label div class=' col-MD-9 '输入类型=' text' class=' form-control '占位符='请输入价格'/Div/Div class=' form-group text-right '输入类型=' button' class=' btnbtn-primary '值=' add '输入类型=' reset' class=' btnbtn-default '值='重新填写'/div /form值得注意的是：

(1)“形控”这种类风格会独占一行。要使标签和输入在一条线上，可以使用bootstrap的栅格布局，调整后3: 9布局更适合。

(2)‘形横’风格可以通过作用于形体元素来美化形体。它会在每个表单组之间留下间隙，变得不那么紧凑；您也可以将标签的内容居中。

“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 '选项值='5'5条/option选项值='10'10条/option选项值='15'15条/option选项值='20'20条/option/select/div/div class=' form-group col-MD-6 ' label class=' col-MD-3 col-MD-offset-3 control-label '搜索：/标签div class='col-md-6 '输入类型='text' class='form-control '占位符='请输入关键字/div /div /div这部分较简单，这里依然使用到了'水平形式'来调整布局

主体

table class=' table table-加边框表格-悬停表格-分条'并且tr td宽度='50 '序号运输署/运输署书名运输署/运输署类别运输署/运输署价格（元)/td td更新时间TD/TD宽度='140 '操作/td /tr /thead tbody tr td1/td td标准日本语运输署/运输署文化TD/TD 31.00/TD TD 2017年04月16日14:26:43/TD TD TD按钮=' BTN BTN-信息BTN-xs ' I class=' fa fa-pencil '/I修改/button button=' BTNBTN-危险BTN-xs ' I ' class=' fa ' fa-垃圾桶/i删除/button /td /tr /tbody /table "表格边框"添加单元格的边框

"表-悬停"鼠标悬停一行有样式

"桌面条纹"斑马线效果

五、删除

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

模态框：

div id=' general _ dialog ' class=' modal fade bs-example-modal-sm '角色=' dialog ' div class=' modal-dialog modal-sm '角色=' document ' div class=' modal-content ' div class=' modal-header ' button class=' close ' data-mission=' modal '/button H4 class=' modal-title '提示/h4 /div div class='modal-body '您确认要删除xxx吗？/div class='模式-页脚文本-右侧'按钮' BTN BTN-默认'数据-错误='模态'取消/button button class=' BTNBTN-危险' data-dispose=' model '删除/按钮/div /div /div这样写，初始是不会出来的，在删除按钮元素上添加：

数据-切换='模态'数据-目标='#general_dialog '

那么点击按钮的时候，就会弹出来（此处需要引入靴子。射流研究…哦)

"褪色"表示模态框是淡入淡出的

“bs-范例-模态-sm "是指模态框的大小是sm '

''是一个实体标记，代表是

五步完成后，样子是：