element-ui滾動(dòng)條el-scrollbar置底方式
element-ui滾動(dòng)條el-scrollbar置底
在需要滾動(dòng)的地方加上
<el-scrollbar ref="myScrollbar" style="height: 600px"></el-scrollbar>
方法
scrollDown() { this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight }
不能在接收數(shù)據(jù)時(shí)調(diào)用,需要在頁(yè)面渲染結(jié)束時(shí)調(diào)用方法
updated: function() { this.scrollDown() }
element-ui表格滾動(dòng)條樣式el-scrollbar使用問(wèn)題
實(shí)現(xiàn)效果:
問(wèn)題如下圖,原始表格滾動(dòng)條很丑
想要的效果如下
操作步驟
1、template部分代碼
<template> <!-- 外面的最大的父容器盒子 --> <div class="ccc"> <!-- 使用el-scrollbar標(biāo)簽的效果 --> <div class="box"> <!-- 隱藏標(biāo)簽scrollbar包住所有滾動(dòng)內(nèi)容 --> <el-scrollbar> <el-table :data="tableData" 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="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> </el-table> </el-scrollbar> </div> <!-- 沒(méi)有使用el-scrollbar標(biāo)簽普通容器效果 --> <div class="box2"> <el-table :data="tableData" 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="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> <el-table-column prop="address" label="地址" width="480"> </el-table-column> </el-table> </div> </div> </template>
2、script數(shù)據(jù)部分的代碼
<script> export default { // 數(shù)據(jù) data () { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' } ] } } } </script>
3、css樣式部分代碼
<style> .ccc .box { width: 100%; height: 400px; border: 1px solid red; margin: 0 auto; white-space: nowrap; } .ccc .el-scrollbar { height: 100%; } .ccc .box2 { margin-top: 50px; height: 200px; overflow: overlay; } /* 最為關(guān)鍵得兩個(gè)樣式代碼,可以設(shè)置全局滾動(dòng)條樣式,也可以按需設(shè)置 */ .ccc ::-webkit-scrollbar { /* 設(shè)置豎向滾動(dòng)條的寬度 */ width: 5px; /* 設(shè)置橫向滾動(dòng)條的高度 */ height: 5px; } .ccc ::-webkit-scrollbar-thumb { /*滾動(dòng)條的背景色*/ background-color: rgba(144,147,153,.3); border-radius: 35px; position: relative; } </style>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn)
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue新手入門(mén)出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue+thinkphp5.1+axios實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了Vue+thinkphp5.1+axios實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05vue項(xiàng)目實(shí)現(xiàn)對(duì)某個(gè)區(qū)域繪制水印
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)對(duì)某個(gè)區(qū)域繪制水印,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼
這篇文章主要介紹了Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼,需要的朋友可以參考下2017-08-08