vue+iview+table+滚动+悬停

封装的组件

<template>

  <!--主表格-->

  <div class="detailBox">

    <Table

      stripe

      ref="tempPeopleSelection"

      :columns="tempRecordcolumns"

      :data="tempRecordData"

      @mousemove.native="onMove"

      @mouseout.native="offOut"

    ></Table>

  </div>

</template>

<script>

import { formatDate } from "@/api/time";

export default {

  name: "tempPeople",

  data() {

    return {

      // 主页面数据

      tempRecordcolumns: [

        // {type: 'selection',width: 60,align: 'center'},

        {

          title: "序号",

          key: "id",

          width: 60,

          render: (h, params) => {

            return h("span", {}, params.index + 1);

          }

        },

        {

          title: "头像",

          key: "photo",

          render: (h, params) => {

            let _img = params.row.photo; //因为现在后台返回来的只有一张图片，String类型。

            let imgs = [_img]; //组装成 数组

            if (_img) {

              return h(

                "viewer",

                {

                  props: {

                    images: imgs //数组

                  }

                },

                imgs.map(img => {

                  //循环显示

                  return h("img", {

                    attrs: {

                      src: img,

                      style: "width: 40px;height: 40px;"

                    }

                  });

                })

              );

            } else {

              return h("span", "");

            }

          }

        },

        {

          title: "设备编号",

          key: "device_sn"

        },

        {

          title: "姓名",

          key: "name"

        },

        {

          title: "手机号",

          key: "phone"

        },

        {

          title: "身份证号/脱敏身份证号",

          key: "id_card_no"

        },

        {

          title: "测温地点",

          key: "location"

        },

        {

          title: "是否戴口罩",

          key: "mask",

          render: (h, params) => {

            if (params.row.mask == "0") return h("span", "未戴口罩");

            else return h("span", "戴口罩");

          }

        },

        {

          title: "测温温度",

          key: "temp"

          // sortable: true,

        },

        {

          title: "苏康码状态",

          key: "skm_level",

          render: (h, params) => {

            if (params.row.skm_level === 1) return h("span", "绿码");

            else if (params.row.skm_level === 2) return h("span", "黄码");

            else if (params.row.skm_level === 3) return h("span", "红码");

            else return h("span", "其他");

          }

        },

        {

          title: "最后测温时间",

          key: "time",

          // sortable: true,

          render: (h, params) => {

            let value = params.row.time;

            if (

              typeof value === "undefined" ||

              value === null ||

              value === "" ||

              value === undefined ||

              value === "0000-00-00 00:00:00"

            ) {

              value = "";

            } else {

              value = formatDate(new Date(params.row.time), "yyyy-MM-dd hh:mm");

            }

            return h("div", value);

          }

        }

      ],

      tempRecordData: [

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        },

        {

          photo: "88",

          device_sn: "88",

          name: "88",

          phone: "88",

          id_card_no: "88",

          location: "88",

          mask: 0,

          temp: "88",

          skm_level: 1,

          time: "88"

        }

      ],

      timer: null

    };

  },

  mounted() {

    setTimeout(() => {

      this.detail();

    }, 0);

  },

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer);

    }

  },

  methods: {

    detail() {

      setTimeout(this.play(), 500);

    },

    play() {

      var table = document.getElementsByClassName("ivu-table-body");

      if (this.timer) {

        clearInterval(this.timer);

      }

      // 定时器

      this.timer = setInterval(() => {

        table[0].scrollTop++;

        if (table[0].scrollTop >= 240 / 2) {

          table[0].scrollTop = 0;

        }

      }, 100);

    },

    // 鼠标移入

    onMove() {

      clearInterval(this.timer);

      this.timer = null;

    },

    // 鼠标移出

    offOut() {

      this.play()

    }

  }

};

</script>

<style lang="less">

.detailBox {

  .ivu-table th {

    background-color: #7693fa !important;

    color: #fff;

  }

  .ivu-table-body {

    overflow: hidden !important;

    height: 450px !important;

  }

}

</style>