el-table 鼠标移入显示移出隐藏滚动条

时间 2021-08-12

标签 web app this spa code blog table class webkit 栏目 HTML 繁體版

原文原文链接

话很少说，上代码web

<el-table
     :data="propertyData"
     style="width: 100%"
     max-height="400px"
     :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
     @cell-mouse-enter="enter"
     @cell-mouse-leave="leave">
          <el-table-column label="名称" align="center" prop="assetsName" />
          <el-table-column label="品牌" align="center" prop="assetsBrand" />
          <el-table-column label="型号" align="center" prop="assetsModel" />
          <el-table-column label="数量" align="center" prop="number" />
</el-table>

data(){
    return{
      propertyData:[],
      isDologin: false
    }
},
methods: {
     enter() {
      this.isDologin = true;
     },
     leave() {
      this.isDologin = false;
     }
}

/*滚动条的宽度*/
.commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
.scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block;
}