当前位置:   article > 正文

el-table自动滚动&el-table样式&鼠标悬停&隔行换色_vue el-table 向上滚动,悬浮停止

vue el-table 向上滚动,悬浮停止

在这里插入图片描述

<template>
  <div style="  width:800px;
  height: 250px;">
    <el-table
        class="my-el-table"
        :data="PushOpenResource"
        ref="tableTemp"
        @cell-mouse-enter="mouseEnter"
        @cell-mouse-leave="mouseLeave"
        width="100%"
        height="250"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{color:'rgb(159,172,184)',background:'rgb(24,75,120)',textAlign:'center'}"
        style="z-index: 998;background-color: rgba(6,49,106,0.93);overflow-x:hidden;border: 1px solid #1b1b1b;border-color: #191919;"
    >
      <el-table-column label="序号" align="center" width="55" prop="xh" type="index">
      </el-table-column>
      <el-table-column
          prop="name"
          label="问题类型"
      ></el-table-column>
      <el-table-column
          prop="value"
          label="投诉量(件)"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableInterval: null,
      PushOpenResource: [{
        name: '网络不正当竞争',
        value: 1000,
      }, {
        name: '侵犯人格尊严',
        value: 800,
      }, {
        name: '经营者拒不履行合法约定',
        value: 300,
      }, {
        name: '冒充合法产品',
        value: 400,
      },
        {
          name: '网络不正当竞争1',
          value: 1200,
        }, {
          name: '侵犯人格尊严2',
          value: 400,
        }, {
          name: '经营者拒不履行合法约定3',
          value: 300,
        }, {
          name: '冒充合法产品4',
          value: 400,
        }],
    }
  },
  mounted() {
    this.scrollTable()
  },
  methods: {
//鼠标移入单元格事件
    mouseEnter(row) {
      console.log("鼠标移入单元格事件======>")
      clearInterval(this.tableInterval);
    },
    //鼠标移出单元格事件
    mouseLeave(row) {
      console.log("鼠标移入单元格事件======>")
      this.scrollTable();
    },
    // 滚动
    scrollTable() {
      const table = this.$refs.tableTemp
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.tableInterval = setInterval(() => {
        console.log("divData=====>")
        // 元素自增距离顶部1像素
        divData.scrollTop += 5
        // console.log("divData===>", divData)
        console.log("scrollTop===>", divData.scrollTop)
        console.log("clientHeight===>", divData.clientHeight)
        console.log("scrollHeight===>", divData.scrollHeight)
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop+1 >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)


    },
  }

}
</script>

<style scoped>

.el-table--border th.gutter:last-of-type {
  border: 1px solid #717172;
  border-left: none;
}

.el-table--border, .el-table--group {
  border: none;
}

.my-el-table th {
  border: none;
}


.my-el-table td,
.my-el-table th.is-leaf {
  border: none;
}



.my-el-table thead tr th.is-leaf {
  border-bottom: 1px solid #171414;
  border-right: none;
}

/*heard上面的白边*/
/deep/ .has-gutter .gutter {
  display: none !important;
}


/*去掉最下面一行*/
.el-table::before {
  height: 0px;
}

/*// 滚动条的宽度*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 6px; // 横向滚动条*/
  /*height: 6px;*/
  width: 20px;
  float: left;
  /*left: 1px;*/
}

/*// 滚动条的滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(10, 87, 130, 0.76);
  border-radius: 1px;
  width: 3px;
}

/*// 滚动条样式*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgba(6, 53, 112, 0.24);
  width: 5px;
}

/*// 当表格有纵向滚动条时*/
::v-deep .el-table--scrollable-y .el-table__fixed-right {
  right: 7px !important;
}

::v-deep .el-table__fixed, .el-table__fixed-right {
  height: calc(100% - 8px) !important;
  right: 8px !important;
}



/*去掉底部白边*/
/deep/ .el-table_body-wrapper{

  height: calc(100% - 39px) !important;

}

.table-wrapper /deep/ .el-table--fit{
  padding: 20px;
}
.table-wrapper /deep/  .el-table, .el-table__expanded-cell {
  background-color: transparent;
}


/*隔行换色 start*/
/*//表格内容颜色*/
  ::v-deep .el-table__body tbody tr:nth-child(odd) {
    color: white;
    /*text-align: center;*/
    background-color: rgba(23, 57, 108, 0.86);
  }
::v-deep .el-table__body tbody tr:nth-child(even) td {
  color: white;
  /*text-align: center;*/
  background-color: #0580b6;
}
/*隔行换色 end*/


/*// 鼠标经过颜色改为粉红色*/
/*// 鼠标经过颜色改为粉红色*/
::v-deep  .el-table__body tr:hover>td{

     background-color: rgba(56, 179, 220, 0.71) !important;

   }



</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
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/621589
推荐阅读
相关标签
  

闽ICP备14008679号