自定义表格，自动滚动（适用postcss-px-to-viewport 插件）

<template>

  <div

    class="tables"

    :style="{

      marginTop: marginTop,

      marginLeft: marginLeft,

      marginBottom: marginBottom,

    }"

  >

    <div class="div-select">

      <span

        v-for="(item, index) in tabList"

        :key="index"

        :class="[activeFlag == index ? 'active' : '']"

        @click="tabHandle(index)"

        >{{ item }}</span

      >

    </div>

    <div class="div-table">

      <div class="table-header">

        <div v-for="(item, index) in headerList" :key="index">

          {{ item.label }}

        </div>

      </div>

      <div class="table-body" v-if="tableList && tableList.length">

        <div

          ref="content"

          class="table-body-content"

          :style="{ transform: 'translateY(' + leftWidth + 'px)' }"

        >

          <div

            :class="['table-tr', index % 2 == 0 ? '' : 'back']"

            v-for="(item, index) in tableList"

            :key="index"

          >

            <div v-for="ele in headerList" :key="ele.props">

              <div v-if="ele.props == 'name'">

                <span

                  v-if="item.category == 1"

                  class="iconfont"

                  style="color: #e74e4e; font-size: 14px"

                  >&#xe66f; {{ item.categoryDesc }}</span

                >

                <span

                  v-if="item.category == 2"

                  class="iconfont"

                  style="color: #f8b62d; font-size: 14px"

                  >&#xe668; {{ item.categoryDesc }}</span

                >

                <span

                  v-if="item.category == 5"

                  class="iconfont"

                  style="color: #8d6dff; font-size: 14px"

                  >&#xe670; {{ item.categoryDesc }}</span

                >

                <span>{{ item[item.props] }}</span>

              </div>

              <div v-else :title="item[ele.props]">{{ item[ele.props] }}</div>

            </div>

          </div>

          <div ref="bodyBottom" class="table-tr-bottom"></div>

        </div>

      </div>

      <div class="body-none" v-else>

        <img src="../assets/img/data-none.png" alt="" />

      </div>

      <div ref="tableBottom" class="table-body-bottom"></div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      leftWidth: 0,

      activeFlag: 0,

      tableInterval: null,

    };

  },

  /*

    模仿el-table封装

    props中的name是写死的

    图标用到了iconfont

    css预编译stylus

  */

  props: {

    tabList: {

      type: Array,

      default: () => [],

    },

    headerList: {

      type: Array,

      default: () => [],

    },

    tableList: {

      type: Array,

      default: () => [],

    },

    marginTop: {

      type: String,

      default: "0px",

    },

    marginLeft: {

      type: String,

      default: "6px",

    },

    marginBottom: {

      type: String,

      default: "0px",

    },

  },

  methods: {

    tabHandle(index) {

      this.activeFlag = index;

      this.$emit("tabHandle", index);

    },

    outHandle() {

      if (this.tableInterval) {

        clearInterval(this.tableInterval);

      }

      this.tableInterval = setInterval(() => {

        let tableTop = this.$refs.tableBottom.getBoundingClientRect().top;

        let bodyTop = this.$refs.bodyBottom.getBoundingClientRect().top;

        this.leftWidth -= 1;

        if (bodyTop <= tableTop) {

          this.leftWidth = 0;

        }

      }, 100);

    },

  },

  mounted() {},

  watch: {

    tableList(newVal) {

      this.leftWidth = 0;

      if (newVal.length > 4) {

        this.outHandle();

      } else {

        if (this.tableInterval) {

          clearInterval(this.tableInterval);

        }

      }

    },

  },

  beforeDestroy() {

    clearInterval(this.tableInterval);

  },

};

</script>

<style lang="stylus" scoped>

.div-table {

  height: 200px;

  overflow: hidden;

  .table-header {

    display: flex;

    div {

      flex: 1;

      height: 32px;

      line-height: 32px;

      text-align: center;

      font-size: 14px;

      color: #29abe2;

      background: #012e62;

    }

  }

  .table-body {

    height: 168px;

    overflow: hidden;

    .table-body-content {

      .table-tr {

        display: flex;

        overflow: hidden;

        border-bottom: 1px solid #283d6f;

        div {

          flex: 1;

          padding: 0 10px;

          height: 40px;

          line-height: 40px;

          text-align: center;

          font-size: 12px;

          color: #99a5d7;

          overflow: hidden; /* 隐藏 */

          white-space: nowrap; /* 不换行 */

          text-overflow: ellipsis; /* 超出部分省略号 */

        }

      }

      .back {

        background: rgba(18, 38, 82, 0.7);

      }

      .table-tr-bottom {

        height: 1px;

      }

    }

  }

  .body-none {

    text-align: center;

    img {

      width: 100px;

      height: 100px;

      padding-top: 50px;

    }

  }

  .table-body-bottom {

    height: 1px;

  }

}

.div-select {

  margin-bottom: 16px;

  span {

    display: inline-block;

    border: 1px solid #8493c3;

    width: 70px;

    height: 20px;

    line-height: 20px;

    text-align: center;

    color: #8493c3;

    margin-right: 10px;

    cursor: pointer;

  }

  .active {

    background: #02d4ff;

    color: #fff;

    border: 0px;

    height: 22px;

  }

}

</style>