element table自动滚动+滚动条样式修改

element table自动滚动+滚动条样式修改

一、table滚动样式修改

.table {
  background: rgba(187, 187, 187, 100);
}
.table th.gutter:last-of-type {
  border: 0 !important;
}
/* //滚动条的宽度 */
.table .el-table__body-wrapper::-webkit-scrollbar {
  border: 0;
  width: 6px;
  height: 10px;
}
/* //滚动条的滑块 */
.table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、table样式修改

1.高亮行

高亮行

.el-table {
  /deep/.el-table--striped
    .el-table__body
    tr.el-table__row--striped.current-row
    td,
  /deep/.el-table__body tr.current-row > td {
    color: #fff;
    background-color: #666 !important;
  }
}
1
2
3
4
5
6
7
8
9
10

2.高亮行

鼠标划上

.el-table {
  /deep/.el-table__body tr:hover > td {
    color: #999 !important;
  }
}
1
2
3
4
5
6

3.table样式修改

.el-table >>> th {
  background-color: #666666;
  font-size: 36px;
}
.el-table >>> .cell {
  line-height: normal;
}
.el-table >>> tr {
  background-color: rgba(187, 187, 187, 100);
}
.el-table >>> td {
  border-top: 2px solid #999;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

三、table自动滚动

<script>
let rolltimer = ""; // 自动滚动的定时任务
let changetimer = ""; // 自动切换的定时任务

export default {
	data(){
		return{
			rollPx: 1,
			refreshTime: 5,
			rollTime: 5,
		}
	}

  mounted() {
    this.autoRoll();
    this.autoChange();
  },

  methods: {
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(rolltimer);
        return;
      }

      // 拿到表格挂载后的真实DOM
      const table = this.$refs.rw_table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      rolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, this.rollTime * 10);
    },
    // 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(changetimer);
        return;
      }
      changetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay;
        this.autoRoll(true); // 先清除定时器
        this.autoRoll(); // 再开启定时器
      }, this.refreshTime * 1000);
    },
    // 鼠标进入
    mouseEnter(time) {
      // 鼠标进入停止滚动和切换的定时任务
      this.autoRoll(true);
      this.autoChange(true);
    },
    // 鼠标离开
    mouseLeave() {
      // 开启
      this.autoRoll();
      this.autoChange();
    },
  },
};
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

总结

参考地址
记录一下，方便下次直接用