背景描述:

使用 smart-admin 开发后台管理系统;
官方网址:https://gitee.com/lab1024/smart-admin
View Design网址:https://www.iviewui.com/view-ui-plus/component/form/table

在页面中使用 table组件后,操作流程如下:
1.给table一个固定高度,固定宽度;
2.给操作栏fixed在左右侧都可
ok,目前会看到界面是正常的,但是,大家都知道原生的滚动条样式有点点丑,一般情况都会去修改滚动条的样式对吧,
so~问题就出现了...你就会看到图(2)效果
finally,那么如何解决呢?,咱们接着往下看...

正常情况如图(1):

遇到的问题(2):

解决后效果如图(3):

上代码:

<template>
<div>
<Table
width="600"
height="400"
border
:columns="columns"
:data="tableData"
>
<template #action>
<Button type="text" style="margin-right: 15px">编辑</Button>
<Button type="text">删除</Button>
</template>
</Table>
</div>
</template>
<script>
export default {
name: 'TableDemo',
data(){
return {
columns: [
...,
{
title: '操作',
key: 'action',
fixed: 'right',
slot: 'action',
width: 160
}
],
tableData: []
}
}
}
</script>
<style lang="less" scoped>
// 重新设置 滚动条宽高样式
.ivu-table-overflowY {
&::-webkit-scrollbar {
width: 8px; //这里的宽度可以根据实际情况来处理。不过,需要注意一点的就是,原生滚动条的宽度是17px。
height: 8px; //这里的高度同上。
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 5px rgb(185,185,185);
-webkit-box-shadow: inset 0 0 5px rgb(185,185,185);
background: #c7c5c8;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,.2);
border-radius: 5px;
background: rgb(247,247,247);
}
}
// 这里的样式代码重要
.ivu-table-fixed-body{
box-sizing: content-box;
padding-bottom: 9px; // 这里为什么是9px,而不是10px,抑或5px等等,原因在于,原生滚动条宽度是17px;我们给滚动条设置的宽度为8px;这个宽度差就是9px了。
}
// 这里的样式代码重要
.ivu-table-fixed-right{
right: 8px !important; // 原因同上,可设置为9px,但是从demo上看,设置8px效果会好看点,不会看到一条border线。还有一点,可能会出现样式穿透问题,那么可借助 /deep/ 来处理
}
</style>

 

原文地址:http://www.cnblogs.com/sunnyeve/p/16854614.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性