elementUI el-table如何使用el-scrollbar自定义样式
时间: 2024-05-22 09:08:25 浏览: 23
在 elementUI 的 el-table 中使用 el-scrollbar 自定义样式,可以通过以下步骤实现:
1. 在组件中引入 el-scrollbar 组件:
```javascript
import ElScrollbar from 'element-ui/lib/scrollbar';
```
2. 在 el-table 组件中使用 scoped slot,给 table 的 body-wrapper 增加一个自定义的滚动条:
```html
<template>
<el-table
:data="tableData"
style="width: 100%"
height="300px"
:header-cell-style="{background: '#f5f7fa', color: '#909399', fontWeight: 'bold'}"
>
<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="地址"></el-table-column>
<template slot="body-wrapper" slot-scope="{ row, $index }">
<el-scrollbar wrap-class="scrollbar-wrap">
<table>
<tbody>
<tr v-for="(item, index) in row" :key="index">
<td>{{ item }}</td>
</tr>
</tbody>
</table>
</el-scrollbar>
</template>
</el-table>
</template>
```
3. 在样式表中自定义滚动条的样式:
```css
.scrollbar-wrap {
/* 设置滚动条宽度和高度 */
width: 100%;
height: 100%;
/* 设置滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #ccc;
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)