Vue去除滚动条(div加el-table)兼容firefox

1.el-table去除滚动条

		.el-table {
            height: calc(100vh - 280px);//固定高度
            overflow-y: auto;//设置滚动
            scrollbar-color: transparent transparent;//兼容火狐
            &.el-table--scrollable-y ::-webkit-scrollbar {
              display: none !important;//隐藏滚动条
            }

2.普通div去除滚动条

		.wrap{
		    height: calc(100vh - 112px);//固定高度
		    overflow: auto;//设置滚动
		    scrollbar-color: transparent transparent;//兼容火狐
		    &::-webkit-scrollbar {
		      display: none;//隐藏滚动条
		    }
		   }
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在el-dialog下打印带滚动条el-table,可以使用vue-print-nb插件结合一些CSS样式来实现。 首先,在el-dialog的模板中,给el-tableel-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-tableel-dialog中带有滚动条,所以还需要设置打印内容的高度为自动(height: auto !important),以保证打印出来的内容可以完整显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值