element-ui滾動條el-scrollbar置底方式
更新時間：2022年08月01日 14:22:30 作者：單推人
這篇文章主要介紹了element-ui滾動條el-scrollbar置底方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui滾動條el-scrollbar置底
在需要滾動的地方加上
<el-scrollbar ref="myScrollbar" style="height: 600px"></el-scrollbar>
方法
scrollDown() {
this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
}
不能在接收數(shù)據(jù)時調(diào)用，需要在頁面渲染結(jié)束時調(diào)用方法
updated: function() {
this.scrollDown()
}
element-ui表格滾動條樣式el-scrollbar使用問題
實現(xiàn)效果：
問題如下圖，原始表格滾動條很丑
想要的效果如下
操作步驟
1、template部分代碼
<template>
<!-- 外面的最大的父容器盒子 -->
<div class="ccc">
<!-- 使用el-scrollbar標(biāo)簽的效果 -->
<div class="box">
<!-- 隱藏標(biāo)簽scrollbar包住所有滾動內(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>
<!-- 沒有使用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)鍵得兩個樣式代碼，可以設(shè)置全局滾動條樣式，也可以按需設(shè)置 */
.ccc ::-webkit-scrollbar {
/* 設(shè)置豎向滾動條的寬度 */
width: 5px;
/* 設(shè)置橫向滾動條的高度 */
height: 5px;
}
.ccc ::-webkit-scrollbar-thumb {
/*滾動條的背景色*/
background-color: rgba(144,147,153,.3);
border-radius: 35px;
position: relative;
}
</style>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)，watchEffect是會自動收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
這篇文章主要介紹了幾分鐘弄懂Vuex的五大屬性和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了electron踩坑之dialog中的callback解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下2023-04-04
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-07-07
mpvue從底層支持 Vue.js 語法和構(gòu)建工具體系，同時再結(jié)合相關(guān)UI組件庫，便可以高效的實現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項目框架 ,需要的朋友可以參考下2019-04-04
vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄
這篇文章主要介紹了vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
文件上傳在很多項目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點續(xù)傳的實現(xiàn)，感興趣的可以了解一下2021-06-06