vue+elmentui实现table行有边框、自动滚动组件_vue eleui table 全局加上边框

table组件

功能概述

技术栈：vue + elmentui
组件功能：行边框 + 自动滚动
参数：表格宽高+最大高度+数据+表头

效果图

组件代码

<template>
  <div class="table" v-cloak>
    <el-table
      :data="tableData"
      :height="_max_height"
      ref="table"
      :style="{'width':_width,'height':_height}"
      size="small"
      :max-height="_max_height"
      highlight-current-row
      :row-class-name="tableRowClassName"
      :row-style="{height:'32px'}"
      :cell-style="{padding:'0px'}" >
      <el-table-column type="index" label="序号" width="50px"></el-table-column>
      <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop" :width="item.width" :label="item.label"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    _width: {
      type: String,
      default: '',
    },
    _height: {
      type: String,
      default: '',
    },
    _max_height: {
      type: String,
      default: '',
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      // if (rowIndex%2 === 0) {
      //   return 'warning-row';
      // } else{
      //   return 'success-row';
      // }
      row.index = rowIndex;
      return 'row-style'
    }
  },

  mounted() {
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table;
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper;
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
        // 重置table距离顶部距离
        // divData.scrollTop = 0;
        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
        divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
      }
    },180);  // 滚动速度
  },

}
</script>

<style>
[v-cloak]{
  display: none !important;;
}
</style>

<style scoped>

/*.table /deep/ .el-table .warning-row {*/
/*  background: #041A42;*/
/*}*/

/*.table /deep/ .el-table .success-row {*/
/*  background: #05295A;*/
/*}*/
/* 给表格每行加框线 */
/deep/ .row-style{
  border: 1px solid #44506B;
  box-shadow: inset 0px 0px 6px 0px #44506B;
}

/*设置表头高度*/
.table /deep/ .el-table__header tr,
.table /deep/ .el-table__header th {
  height: 26px !important;
  padding: 0;
}

/*最外层透明*/
.table /deep/ .el-table,
.table /deep/ .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
.table /deep/ .el-table th,
.table /deep/ .el-table tr,
.table /deep/ .el-table td {
  background-color: transparent;
  color: #ffffff;
  text-align:center;
}

/* 头部样式*/
.table /deep/ .el-table thead {
  background-color: #042652;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
}

/*去掉头部边框 (header的字体大小,颜色)*/
.table /deep/ .el-table thead tr th.is-leaf {
  border: none;
  font-size: 12px;
  color: white;
}

/* 去除底部白线*/
.table /deep/ .el-table::before{
  height: 0px;
}

/* 单元格间距 */
.table /deep/ .el-table__body{
  -webkit-border-horizontal-spacing: 0px !important;  /* 水平间距 */
  -webkit-border-vertical-spacing: 5px !important;  /* 垂直间距 */
}


/* 去除单元格给的表格线 */
.table /deep/ .el-table__row>td{
  border: none;
}

/* 鼠标悬停背景色 */
.table /deep/ .el-table__body tr:hover > td {
  background-color: rgb(67, 72, 78) !important;
}

</style>

<!-- 轮播 -->
<style lang="scss" scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar {

  height: 10px; /*横向滚动条的高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px rgba(18, 183, 194, 0.2); /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: rgba(18, 183, 194, 0.2); /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px rgba(25, 217, 255, 0.3); /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: rgba(18, 183, 194, 0.4); /*滚动条的背景颜色*/
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183