1. <include file="Trade:header" />

2. <style type="text/css" media="screen">

3. #tradeLeft{

4. width: 23%;

5. padding: 20px;

6. }

7. /*chrome滚动条颜色设置*/

8. *::-webkit-scrollbar {width:7px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

9. *::-webkit-scrollbar-track {background-color:#f0f6ff;  } /*定义滚动条轨道 内阴影+圆角*/

10. *::-webkit-scrollbar-thumb {background-color:#73abb1; border-radius:6px;} /*定义滑块 内阴影+圆角*/

11. .scrollbarHide::-webkit-scrollbar{display: none}

12. .scrollbarShow::-webkit-scrollbar{display: block}

13. style>

14. <div id="tradeLeft">

15. <el-tabs v-model="marketlist" type="card" @tab-click="handleClick">

16. <el-tab-pane  label="USDT" name="first">

17.     <el-table  stripe height="200"  :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}">

18. <el-table-column prop="date" label="币种" sortable  width="100">el-table-column>

19. <el-table-column prop="name" label="价格" sortable width="100"> el-table-column>

20. <el-table-column prop="name" label="日涨跌" sortable width="100"> el-table-column>

21. <el-table-column prop="address" label="自选" :formatter="formatter">el-table-column>

22. el-table>

23.  

24. el-tab-pane>

25. <el-tab-pane label="BTC" name="second">配置管el-tab-pane>

26. <el-tab-pane label="ETH" name="third">角色管理el-tab-pane>

27. <el-tab-pane label="自选" name="fourth">定时任务补偿el-tab-pane>

28. el-tabs>

29. div>

31. <script>

32. new Vue({

33.   el:"#tradeLeft",

34.   data:{

35.   marketlist: 'first',

36.   tableData: [{

37. date: '2016-05-02',

38. name: '王小虎',

39. address: '上弄'

40. }, {

41. date: '2016-05-04',

42. name: '王小虎',

43. address: '上海17 弄'

44. }, {

45. date: '2016-05-01',

46. name: '王小虎',

47. address: '上海弄'

48. }, {

49. date: '2016-05-03',

50. name: '王小虎',

51. address: '上海弄'

52. }, {

53. date: '2016-05-01',

54. name: '王小虎',

55. address: '上海弄'

56. }]

57. },

58. methods:{

59. handleClick(tab, event) {

60. console.log(tab, event);

61. },

62. formatter(row, column) {

63. return row.address;

64. }

65. }

66. });

67. //鼠标划入滚动条展现，鼠标划出滚动条隐藏

68. function scrollbarShowHidden(element){

69. element.addClass('scrollbarHide');

70. element.hover(function() {

71. element.addClass('scrollbarShow');

72. }, function() {

73. element.removeClass('scrollbarShow');

74. });

75. }

76. scrollbarShowHidden($('.el-table__body-wrapper'));

77. script>

78. <include file="Public:footer" />
    

固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left  right,表示左边固定还是右边固定

:data="tableData"

border

style="width: 100%">

fixed

prop="date"

label="日期"

width="150">

prop="name"

label="姓名"

width="120">

prop="zip"

label="邮编"

width="120">

fixed="right"

label="操作"

width="100">

查看

编辑

在小屏幕上含有滚动条，显示是正常的，但是如果是大屏幕没有滚动条就在底部约17像素的地方有一条线，非常不美观，

通过审查元素发现，如果是左侧固定，不管有没有滚动条.el-table-fixed 这个元素 样式都是距离底部17px，

固定右边的列类似，只是样式没有直接写bottom:17px

如何解决呢？

思路：页面解析完成后，如果内容的宽度小于或者等于容器的宽度 就把bottom设置为1px

完整的代码

mounted() {

//修改固定列有和没有滚动条的样式

var wrapWidth = document.querySelector(".el-table__header-wrapper").offsetWidth;

var tableWidth;

setTimeout(() => {

tableWidth = document.querySelector(".el-table__header").offsetWidth - 17;

console.log(wrapWidth, tableWidth);

document.querySelector(".el-table__fixed-right").style.height = "auto";

document.querySelector(".el-table__fixed-right").style.bottom = "17px";

if (tableWidth <= wrapWidth) {

document.querySelector(".el-table__fixed").style.bottom = "1px";

document.querySelector(".el-table__fixed-right").style.bottom = "1px";

}

}, 500);

},
————————————————
版权声明：本文为CSDN博主「院花有点甜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_33520805/article/details/112837199