码迷,mamicode.com
首页 > 其他好文 > 详细

Vue element-ui:滚动条 分页 禁用选项

时间:2019-01-29 20:44:58      阅读:600      评论:0      收藏:0      [点我收藏+]

标签:element   字符串   div   ntc   技术分享   temp   bubuko   按钮   png   

1.滚动条设置:

<el-scrollbar style="height:100%;">.......</el-scrollbar>

默认会同时出现水平和垂直两个方向的滚动条,想要隐藏水平方向的滚动条可以设置如下:

.el-scrollbar .el-scrollbar__wrap {
   overflow-x: hidden;
}

2.分页:

<el-pagination
background
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:page-size="page_size"
:current-page="currentPage"
:total="total"
layout="total, prev, pager, next"
style="text-align:right; padding: 49px 29px 50px 0;"
></el-pagination>
methods:
handleCurrentChange(val) {
this.param.page = val
this.getMultiTemplate()
},
handleSizeChange(val){
this.param.page_size = val
this.getMultiTemplate()
},
说明:
layout设置: prev表示上一页,next为下一页,pager表示页码列表,total表示总条目数,size用于设置每页显示的页码数量,background属性可以为分页按钮添加背景色
事件:current-change:currentPage 改变时会触发;size-change:currentPage 改变时会触发    函数中返回val即点击的当前页
 
3.由于加载顺序:父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted,因此会出现加载延迟的情况,提示“暂无数据”,如果不想显示“暂无数据”字样,在el-table中可以设置为空字符
empty-text=" ",在tree树形控件中可以使用设置为空字符串:empty-text=""
 
4.el-table中如何限制某些按钮为禁选
技术分享图片
使用arguments对象可以获取传入的每个参数的值, 打印如下:

技术分享图片

实现的代码如下:

技术分享图片  技术分享图片

 

 

Vue element-ui:滚动条 分页 禁用选项

标签:element   字符串   div   ntc   技术分享   temp   bubuko   按钮   png   

原文地址:https://www.cnblogs.com/prospective-zkq/p/10335353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!