|
3.1.2 Element-UI组件开发3.1.2.1 Element-UI介绍 本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation
我们在对cms的page_list页面开发时，需要在页面中实现下面的功能 1.页面要实现列表展示，这里要使用Table组件 2.页面的页面要显示分页显示，这里要使用Pagination 分页组件 3.用户可以点击查询按钮，来显示查询数据，这里要使用按钮组件 下面我们来分别来进行开发
3.1.2.2 组件Table测试进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中，如下： file:///C:/Users/Administrator/AppData/Local/Temp/360zip$Temp/360$0/%E8%AE%B2%E4%B9%89/images/1539595679831.png 修改page_list.vue文件，将文件中代码修改为
<template>
<div> <!--相当于编写html的内容--> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div></template><script> //填写js代码，实现VM的功能，创建vue实例 export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }</script><style> /*css样式*/</style>
测试： file:///C:/Users/Administrator/AppData/Local/Temp/360zip$Temp/360$0/%E8%AE%B2%E4%B9%89/images/1539596000367.png 通过查看代码发现： el-table组件绑定了tableData模型数据。 tableData模型数据在script标签中定义。
3.1.2.2 分页组件Pagination测试1.进入Element-UI官方，找到分页组件，拷贝源代码到page_list.vue页面中，如下： file:///C:/Users/Administrator/AppData/Local/Temp/360zip$Temp/360$0/%E8%AE%B2%E4%B9%89/images/1539599644947.png
<template>
<div> <!--相当于编写html的内容--> <el-table :data="tableData" stripe style="width: 100%"> .......... </el-table> <!--------------------添加的分页组件-------------------------> <el-pagination layout="prev, pager, next" :total="50"> </el-pagination> <!--------------------添加的分页组件-------------------------> </div></template>.........
file:///C:/Users/Administrator/AppData/Local/Temp/360zip$Temp/360$0/%E8%AE%B2%E4%B9%89/images/1539599927081.png
2.根据页面分页的习惯，一般分页条会放到表格的右下角，这里可以添加style属性来更改位置
<el-pagination
layout="prev, pager, next" :total="50" style="float:right;" >
</el-pagination>
file:///C:/Users/Administrator/AppData/Local/Temp/360zip$Temp/360$0/%E8%AE%B2%E4%B9%89/images/1539600247660.png
3.使用vm来管理分页数据 page_list.vue分页的代码
.....
<el-pagination layout="prev, pager, next" :page-size="params.size" :total="total" :current-page="params.page" v-on:current-change="changePage" style="float:right;"></el-pagination>......
| 
收藏
淘帖
踩
