DX-LargeScreen/src/components3/zuhuguanli/seTable.vue

<template>
  <div>
    <el-table ref="initList" :data="data"  height="190"  v-loading="loading">
      <template slot="empty">
          <span>{{text}}</span>
      </template>
      <el-table-column label="区域名称"  prop="n1"  show-overflow-tooltip min-width="33%" >
        <template  slot-scope="scope">
          {{scope.row.n1 ? scope.row.n1 : "-"}}
        </template>
      </el-table-column>
      <el-table-column label="出租单位"  prop="n2"  show-overflow-tooltip min-width="33%" >
        <template  slot-scope="scope">
          {{scope.row.n2 ? scope.row.n2 : "-"}}
        </template>
      </el-table-column>
      <el-table-column label="企业权限"  prop="n3"  show-overflow-tooltip min-width="34%" >
        <template  slot-scope="scope">
          {{scope.row.n3 ? scope.row.n3 + '人' : "-"}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  props: ["resData"],
  data() {
    return {
      text:"",
      loading:true,
      data:[]
    };
  },
  watch: {
    resData(val,old){
      this.data = val
      if(this.data.length>0){
        this.loading = false
        this.data = val
      }else{
        this.loading = false
        this.text = "暂无数据"
      }
    }
  },
  created(){
    // this.selectChange()
  },
  // watch: {
  //   select: {
  //       handler (n, o) {
  //         this.selectChange()
  //       },
  //       deep: true // 深度监听父组件传过来对象变化
  //     }
  // },
  mounted() {},
  methods: {

    initDataSBSS(){
      this.select2 = true
      this.select1 = false
      this.videoSelect = []
    },
    //数据滚动
    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();
    },
    //点击行
    clickData(row){
      if(this.select1 == "1"){
        this.$emit("videoClick", 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;//滚动条背景色
  }
  .el-table th > .cell {
    // font-size: 12px;
  }
  tr .cell{
    padding-left: 20px !important;
  }

}
</style>