网站策划运营方案书,网站首页源码,wordpress证书安装,郑州高档网站建设目录 1 Table表格组件1.1 组件演示1.2 组件属性详解 2 Pagination分页2.1 组件演示2.2 组件属性详解2.3 组件事件详解 接下来我们来学习一下ElementUI的常用组件#xff0c;对于组件的学习比较简单#xff0c;我们只需要参考官方提供的代码#xff0c;然后复制粘贴即可。本节… 目录 1 Table表格组件1.1 组件演示1.2 组件属性详解 2 Pagination分页2.1 组件演示2.2 组件属性详解2.3 组件事件详解 接下来我们来学习一下ElementUI的常用组件对于组件的学习比较简单我们只需要参考官方提供的代码然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件
1 Table表格组件
1.1 组件演示
Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。
接下来我们通过代码来演示。
首先我们需要来到ElementUI的组件库中找到表格组件如下图所示 然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示
template模板部分 script脚本部分 ElementView.vue组件文件整体代码如下
templatediv!-- Button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row!-- Table表格 --el-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/div
/templatescript
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 弄}]}}
}
/scriptstyle/style
此时回到浏览器我们页面呈现如下效果 1.2 组件属性详解
那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性
data: 主要定义table组件的数据模型prop: 定义列的数据应该绑定data中定义的具体的数据模型label: 定义列的标题width: 定义列的宽度
其具体示例含义如下图所示 PS:Element组件的所有属性都可以在组件页面的最下方找到如下图所示 2 Pagination分页
2.1 组件演示
Pagination: 分页组件主要提供分页工具条相关功能。其展示效果图下图所示 接下来我们通过代码来演示功能。
首先在官网找到分页组件我们选择带背景色分页组件如下图所示 然后复制代码到我们的ElementView.vue组件文件的template中拷贝如下代码
el-paginationbackgroundlayoutprev, pager, next:total1000
/el-pagination浏览器打开呈现如下效果 2.2 组件属性详解
对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到
background: 添加北京颜色也就是上图蓝色背景色效果。layout: 分页工具条的布局其具体值包含sizes, prev, pager, next, jumper, -, total, slot 这些值total: 数据的总数量
然后根据官方分页组件提供的layout属性说明如下图所示 我们修改layout属性如下 layoutsizes,prev, pager, next,jumper,total浏览器打开呈现如下效果 发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示 2.3 组件事件详解
对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习
size-change pageSize 改变时会触发current-change currentPage 改变时会触发
其官方详细解释含义如下图所示 对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到如下图所示 然后我们找到对应的代码首先复制事件复制代码如下
size-changehandleSizeChange
current-changehandleCurrentChange此时Panigation组件的template完整代码如下
!-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination紧接着需要复制事件需要的2个函数需要注意methods属性和data同级其代码如下
methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},此时Panigation组件的script部分完整代码如下
script
export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},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回到浏览器中我们f12打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果
