5-6【任务5-2】Element UI的表格Table与分页Pagination组件化ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《5-6【任务5-2】Element UI的表格Table与分页Pagination组件化ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《5-6【任务5-2】Element UI的表格Table与分页Pagination组件化ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、5-6【任务5-2】Element UI的表格Table与分页Pagination组件化教学课件 Vue.js基础与应用开发实战（微课版）【任务5-2】Element UI的表格Table与分页Pagination组件化在Web项目开发过程中，经常需要对大量数据进行列表分页查询，为了便于阅读并减少代码的冗余，对Element UI的表格和分页组件进行了二次封装，形成组件化的Element UI的表格Table与分页Pagination。【任务描述】1准备项目环境创建Vue项目之前下载并安装好长期支持版的node。（1）安装vue/cli在创建项目之前应先完成vue-cli的全局安装。【任务实施

2、】（2）安装element-ui将element-ui模块通过本地安装为生产依赖，输入以下命令进行安装：npm i element-ui-S【说明】本任务应用了UI组件库“Element-UI”，相关内容详见“附录E 库与插件简介”的“E.2 认知UI组件库Element-UI”。安装完之后再在package.json文件查看是否安装成功。2开始创建Vue项目在命令行中输入以下命令创建Vue项目：vue init webpack case02-tablePagination3创建组件commonTable.vue在项目case02-tablePagination的components文件夹下

3、创 建 common子 文 件 夹，然 后 该 子 文 件 夹 中 新 建commonTable.vue文件，在该文件中添加代码。扫 描 二 维 码 查 看【电 子 活 页 5-45】中 文 件commonTable.vue的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。4新建index.js文件在components文件夹下新建index.js文件，并在该文件中添加如下代码：import commonTable from./common/commonTableexport default install(Vue)Vponent(commonTable,commonTable)上

4、 述 代 码 是 将 自 定 义 的 组 件 在 Vue中 进 行 注 册，component方法中的第一个参数很重要，就是后面在其他组件中调用时的组件名称。后续自定义的所有其他组件也都只需要在该文件注册即可。5完善main.js文件的代码在 main.js中 使 用 Vue.use()方 法 对 自 定 义 组 件commonTable进行安装，实现代码如下：import components from/components/index.js;Vue.use(components);在完成上述所有步骤之后，就可以在任何其他页面中使用。该组件中封装了列表常用的一些功能，例如多选、翻页、表格最大

5、高度、单列格式化、自定义显隐列等，其他的像单列排序、默认显示序号列可以根据实际需要自行添加封装。main.js文件完整的代码如下所示：import Vue from vue;import ElementUI from element-ui/引用element-ui组件库import element-ui/lib/theme-chalk/index.css;/引用样式import App from./App.vue;import router from./router;import components from/components/index.js;Vue.use(components);/

6、使用element-uiVue.use(ElementUI);Vue.config.productionTip=false;console.log(process.env.VUE_APP_BASE_API)new Vue(router,render:(h)=h(App).$mount(#app);6应用自定义组件commonTable在App.vue文件编写代码应用自定义组件commonTable。扫描二维码查看【电子活页5-45】中文件App.vue的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。7运行项目case02-tablePagination在 命 令 行 中 输 入

7、以 下 命 令 运 行 项 目 case02-tablePagination：npm run dev出现以下提示信息表示项目启动成功：DONE Compiled successfully in 378ms I Your application is running here:http:/localhost:8080打 开 浏 览 器，在 地 址 栏 中 输 入 网 址：http:/localhost:8080，按【Enter】键，页面展示效果如图5-14所示。图图5-14 项目项目case02-tablePagination的页面展示效果的页面展示效果快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！