Vue.js仿Metronic高级表格（一）静态设计
|
是Metonic框架中自行实现的表格，其底层是，本教程将主要使用Vue实现交互部分，使用Bootstrap做样式库，jQuery做部分用户交互（弹窗）。 使用到的库：Vue 2.0，Bootstrap3、jQuery2、font-awesome4，均可在下载 需要注意的是，Vue最好使用 一、需求和原型设计产品目标是一个 图书管理表格，书籍字段：书籍名称、分类、价格、更新时间。需求： ① 书籍信息的增删改 ② 分页功能，并且能自行选择页容量 ③ 能展示 根据任一字段进行关键字匹配后的条目 ④ 能自动保存本次操作的数据 原型：
原型说明： ① 页码区提供 上一页、页码列表、下一页 按钮 ② 点击修改时，上部表单内容为原始数据，“添加”按钮变为“修改”，此时点击修改，才将数据保存生效；如果此时点击重新填写则是放弃修改。 ③ 点击删除时弹框提示是否删除 二、准备工作① 搭建运行环境 不建议使用浏览器直接打开网页，建议搭建一个Web环境来进行测试。 建议使用WAMP、XAMPP等集成环境，安装简便易于操作 ② 引入各类库 注意vue.js的路径，下载到本地进行引入（此处使用的是web绝对路径'/static/vue.js'） ③ 进行最简单的Vue测试
window.onload = function () {
var vm = new Vue({
el:'#content',data: {
msg:'hello vue'
}
});
}
值得注意的是， 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'来调整布局 ② 主体
① ‘table-bordered‘ 添加单元格的边框 ② 'table-hover‘ 鼠标悬停一行有样式 ③ 'table-striped' 斑马线效果 五、删除删除弹窗，原型图没给出，所以自行发挥想象力。
模态框： ×
这样写，初始是不会出来的，在删除按钮元素上添加：
那么点击按钮的时候，就会弹出来（此处需要引入bootstrap.js哦） ① ‘fade‘ 表示模态框是淡入淡出的 ② 'bs-example-modal-sm' 是指模态框的大小是'sm‘ ③ 'ב是一个实体标记，代表是× 五步完成后，样子是： （额这个录屏的工具貌似吧table-striped的效果抹去了。。。） 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
