黑马程序员技术交流社区

标题: [石家庄校区]学习经历 [打印本页]

作者: 真的不会起网名 时间: 2019-9-10 14:48
标题: [石家庄校区]学习经历
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>  <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>  <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>......

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2