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標簽的效果 --> <div class="box"> <!-- 隱藏標簽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標簽普通容器效果 --> <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)鍵得兩個樣式代碼,可以設置全局滾動條樣式,也可以按需設置 */ .ccc ::-webkit-scrollbar { /* 設置豎向滾動條的寬度 */ width: 5px; /* 設置橫向滾動條的高度 */ height: 5px; } .ccc ::-webkit-scrollbar-thumb { /*滾動條的背景色*/ background-color: rgba(144,147,153,.3); border-radius: 35px; position: relative; } </style>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue新手入門出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue+thinkphp5.1+axios實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了Vue+thinkphp5.1+axios實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05