DX-LargeScreen/src/components2/fireHazard/seTable.vue

<template>
  <el-table ref="initList" :data="initList"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
      <template slot="empty">
          <span>{{text}}</span>
      </template>
      <el-table-column label="时间" align="left" prop="alarmTime"  show-overflow-tooltip min-width="35%"   />
      <el-table-column label="内容" align="left" prop="property"  show-overflow-tooltip min-width="25%"/>
      <el-table-column label="名称" align="left" prop="deviceName"  show-overflow-tooltip min-width="25%"/>
      <el-table-column label="地点" align="left" prop="unitInfo"  show-overflow-tooltip min-width="15%"/>
    </el-table>
</template>
<script>
import axios from 'axios'
export default {

  data() {
    return {
      initList:[],
      table_interval:null,
      text:"",
      loading:true,
    };
  },
  created(){
    this.initData();
    // this.timing()
  },
  mounted() {},
  methods: {
    //初始化数据
    initData() {
      axios({
            method: 'post',
            url: 'https://smartpark.caih.com/dmapi/tbAlarm/page',
            data:{
              current: 1,
              size: 100,
              type:1,
            },
            timeout: 3000,
        }).then(res =>{
            if(res.data.data.records){
                let data = res.data.data.records
                this.initList = data
            }
            this.loading = false
            this.text = "暂无数据"
        }).catch(err =>{
          this.loading = false
          this.text = "数据加载失败..."
        })
    },
    //数据滚动
    dataScrolling:function(){
        let top=this.$refs.initList.bodyWrapper;
        this.table_interval=setInterval(() => {
            top.scrollTop+=1;
            if(top.clientHeight+top.scrollTop==top.scrollHeight){
              top.scrollTop=0;
            }
        }, 100);
    },
    //鼠标进入，停止滚动
    mouseEnter:function(){
        // clearInterval(this.table_interval);
        // this.table_interval=null;
    },
    //鼠标离开，开始滚动
    mouseLeave:function(){
        // this.dataScrolling();
    },
    timing(){
      setInterval(() =>{
        this.initList = []
      },1000 * 60)
    },
    //点击行
    clickData(row){
      this.$emit("xfgjClick",row)
    },
    // cellStyle (row, column, rowIndex, columnIndex) {
    // //列的label的名称
    //   if (row.column.label === "告警" || row.column.label === "离线") {
    //     return 'color:#2280D9' //修改的样式
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
::v-deep {
  .el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 4px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    height: 50px;
    background: $white;//滚动条颜色
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(35,40,49,1);
    border-radius: 6px;
    background: $modularBackGround;//滚动条背景色
  }
}
</style>