A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 真的不会起网名 中级黑马   /  2019-9-10 14:48  /  721 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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>......







0 个回复

您需要登录后才可以回帖 登录 | 加入黑马