最终结果:(此处没体现出来滚动,数据没那么多)
1.表头固定,设置表头样式,修改表格背景色
<div class="category-table">
<el-table
ref="tableRef"
class="common-table"
height="100%"
:row-style="{ height: rowHeight + 'px' }"
:header-row-style="{
background: `url(${tableHeader}) center no-repeat !important`,
backgroundSize: `100% 100% !important`,
}"
style="width: 100%; height: 100%; background-color: transparent"
>
</el-table>
</div>
动态设置行高,在获取到数据以后,记得加一个$nextTick(),不然会报错
- // 在获取到表格数据后,判断数据长度大于0后调用
- this.$nextTick(() => {
- this.initRowHeight();
- });
- // 设置行高
- initRowHeight() {
- let tableHeight =
- Math.round(this.$refs["tableRef"].$el.offsetHeight) -
- Math.round(this.$refs["tableRef"].$el.childNodes[1].offsetHeight);
- this.rowHeight = Math.floor(tableHeight / 10); // 返回小于等于最终结果的最大整数
- setTimeout(() => {
- if (this.$refs.tableRef) {
- this.$refs.tableRef.doLayout();
- }
- }, 1000);
- },
复制代码
2.写在有scoped 的style标签内
- /* 显示滚动条 */
- .category-table ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
- overflow-y: scroll;
- }
- /* 设置表格的滚动条宽度 */
- .category-table >>> .el-table__body-wrapper::-webkit-scrollbar {
- width: 10px;
- height: 8px;
- }
- /*定义滚动条轨道 内阴影+圆角*/
- .category-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
- border-radius: 8px;
- background-color: transparent;
- }
- /*定义滑块 内阴影+圆角*/
- .category-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
- border-radius: 8px;
- box-shadow: inset 0 0 6px rgba(200, 209, 217, 0.3);
- background-color: rgba(76, 77, 77, 0.1);
- }
复制代码 3.公共的scss样式文件内,没有公共样式文件的话可以放在没有scoped的style标签内,有的话要包管在main.js里引入了
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |