elementui table去掉最后一行滚动条的单元格border和背景
时间: 2024-01-21 21:16:32 浏览: 166
您可以使用 CSS 的 `:last-child` 伪类来去掉最后一行滚动条的单元格边框和背景。具体代码如下:
```css
.el-table__body-wrapper tbody tr:last-child td {
border-bottom: none;
background-color: transparent;
}
```
这段代码会选择最后一行的所有单元格,并将它们的底部边框和背景颜色设置为透明。您可以将上述代码添加到您的 CSS 文件中,即可实现去掉最后一行滚动条的单元格边框和背景效果。
相关问题
elementui table去掉最后一列滚动条的单元格border和背景
您可以通过以下方式来去掉 ElementUI 表格中最后一列滚动条的单元格 border 和背景:
1. 给表格添加一个自定义的 class,例如 "my-table"。
2. 使用以下 CSS 样式来为该表格设置样式:
```
.my-table .el-table__fixed-right-container tbody tr:last-child td {
border-right: none;
background-color: transparent;
}
```
这段 CSS 样式会选择表格中最后一列滚动条右侧的所有单元格,然后将它们的右边框和背景色都设置为透明。
请注意,这个方法只会移除滚动条右侧的单元格的 border 和背景色,而不是整个表格的。如果您想要完全移除表格的 border 和背景色,可以将 `.el-table` 的 border 和 background-color 设置为 none。
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),以保证打印出来的内容可以完整显示。
阅读全文