vue+elementUI项目中,给el-dialog弹窗加一个滚动条
时间: 2024-05-26 12:10:35 浏览: 13
可以在 el-dialog 组件中加入一个 class 为 "dialog-scroll" 的 div 元素,并在 CSS 中添加如下样式:
.dialog-scroll {
max-height: 400px; /*适当调整高度*/
overflow: auto;
}
然后在 el-dialog 的 template 中为该 div 元素添加所需的内容即可。
相关问题
vue-print-nb 打印el-dialog下带滚动条的el-table
要在el-dialog下打印带滚动条的el-table,可以使用vue-print-nb插件结合一些CSS样式来实现。
首先,在el-dialog的模板中,给el-table和el-dialog添加一个唯一的id属性:
``` html
<el-dialog title="打印内容" :visible.sync="dialogVisible" :close-on-click-modal="false">
<div id="printArea">
<el-table id="printTable" :data="tableData" style="width: 100%" height="300">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</el-dialog>
```
接着,在打印按钮的点击事件中,使用vue-print-nb插件的print方法,并添加一些CSS样式:
``` javascript
import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'
Vue.use(VuePrintNB)
export default {
data() {
return {
dialogVisible: false,
tableData: [
{ name: '张三', age: 18, address: '北京市朝阳区' },
{ name: '李四', age: 22, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
]
}
},
methods: {
handlePrint() {
// 打印内容
const printContent = document.getElementById('printArea').innerHTML
// 打印配置
const printConfig = {
title: '',
footer: '',
style: `
#printTable {
width: 100%;
}
#printTable .cell {
padding: 10px;
font-size: 14px;
text-align: center;
border: 1px solid #ddd;
}
#printTable .cell .cell {
padding: 0;
text-align: left;
}
#printTable .cell.el-tooltip {
display: none;
}
#printTable .cell .cell {
padding: 0;
text-align: left;
}
#printTable .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell .cell .cell {
padding: 0;
}
#printArea {
height: auto !important;
}
`
}
// 使用vue-print-nb插件的print方法打印
this.$print(printContent, printConfig)
}
}
}
```
在CSS样式中,需要设置打印的表格宽度为100%,并给表格的单元格添加一些样式,以保证打印出来的表格的格式正确。
另外,由于el-table在el-dialog中带有滚动条,所以还需要设置打印内容的高度为自动(height: auto !important),以保证打印出来的内容可以完整显示。
vue3 el-dialog设置表单滚动条到顶部
你可以在打开 `el-dialog` 的时候设置 `scrollTop` 属性为0来将表单滚动条置于顶部,具体代码如下:
```javascript
// 获取到el-dialog的DOM元素
const dialogEl = document.querySelector('.el-dialog')
// 将表单滚动条置于顶部
dialogEl.scrollTop = 0;
```
你可以在 `el-dialog` 的 `opened` 事件中调用上面的代码来实现这个功能,具体代码如下:
```html
<template>
<el-dialog
title="Dialog Title"
:visible.sync="dialogVisible"
@opened="handleDialogOpen"
>
<el-form>
<!-- 表单内容 -->
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleDialogOpen() {
// 获取到el-dialog的DOM元素
const dialogEl = document.querySelector('.el-dialog')
// 将表单滚动条置于顶部
dialogEl.scrollTop = 0;
},
},
};
</script>
```
以上代码可以确保每次打开 `el-dialog` 时都将表单滚动条置于顶部。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)