十二、Vue2+ElementUI插件：表格每秒自动滚动

前言

工作中一个小小的特效 ✨

Vue2 + ElementUI 实现表格自动向下滚动。

1.NPM地址

• table-auto-scroll

2.效果预览

3.实现功能

• 表格每秒自动向下滚动一个表格行的高度。
• 滚动到表格底部时回到顶部，再次自动滚动。
• 鼠标移入表格区域时，暂停自动滚动。
• 鼠标移出表格区域后，开始自动滚动。

（一）安装

npm install table-auto-scroll

（二）前置第三方库

• 引用当前组件的工程中必需携带以下第三方库

{
  "vue": "^2.6.11",
  "element-ui": "^2.15.14",
  "lodash": "^4.17.21"
}

（三）全局引入

import TableAutoScroll from "table-auto-scroll";
import "table-auto-scroll/dist/table-auto-scroll.css"; // 必须引入样式

Vue.component("TableAutoScroll", TableAutoScroll);

（四）局部引入

import TableAutoScroll from "table-auto-scroll";
import "table-auto-scroll/dist/table-auto-scroll.css";

export default {
  components: {
    TableAutoScroll,
  },
};

（五）基础使用

<template>
  <div class="table-auto-scroll-wrapper">
    <TableAutoScroll :tableHeader="tableHeader" :tableData="tableData" theme="light" />
    <TableAutoScroll :tableHeader="tableHeader" :tableData="tableData" theme="dark" />
  </div>
</template>

<script>
  import TableAutoScroll from "table-auto-scroll";
  import "table-auto-scroll/dist/table-auto-scroll.css";

  export default {
    name: "TableAutoScroll",
    components: {
      TableAutoScroll,
    },
    data() {
      return {
        tableData: [],
        tableHeader: [
          {
            prop: "id",
            label: "排名",
            width: "50px",
          },
          {
            prop: "name",
            label: "名称",
            width: "150px",
          },
          {
            prop: "amount",
            label: "收入",
            width: "100px",
          },
          {
            prop: "address",
            label: "地址",
          },
          {
            prop: "remark",
            label: "备注",
          },
        ],
      };
    },
    mounted() {
      // 模拟接口数据
      setTimeout(() => {
        this.tableData = new Array(15).fill({}).map((_, index) => ({
          id: index + 1,
          name: "哈哈哈哈哈哈哈哈哈哈哈" + (index + 1),
          amount: parseFloat(Math.random() * (9999 - 1000) * (index + 1)).toFixed(2),
          address: "测试地址测试地址测试地址测试地址测试地址测试地址测试地址测试地址" + index + 1,
          remark: "测试备注测试备注测试备注测试备注测试备注测试备注测试备注测试备注" + index + 1,
        }));
      }, 1000);
    },
  };
</script>

（六）个性化

1.可选主题色

• dark
• light

<TableAutoScroll theme="light" />

<TableAutoScroll theme="dark" />

2.表格高度

<TableAutoScroll tableHeight="500px" />

<TableAutoScroll tableHeight="100vh" />

3.表头样式

<TableAutoScroll
  :headStyle="{
    background: 'linear-gradient(90deg, #e1f5fe, #b3e5fc)',
    color: '#0277bd',
  }"
></TableAutoScroll>

<TableAutoScroll
  :headStyle="{
    background: '#b3e5fc',
    color: '#0277bd',
  }"
></TableAutoScroll>

4.表格行样式

• firstRow：第一行
• secondRow：第二行
• thirdRow：第三行
• oddRow：奇数行
• evenRow：偶数行

<TableAutoScroll
  :rowStyle="{
    firstRow: {
      background: 'linear-gradient(90deg, #2e7d32, #4caf50)',
      color: '#ffffff',
    },
    secondRow: {
      background: 'linear-gradient(90deg, #4caf50, #81c784)',
      color: '#1b5e20',
    },
    thirdRow: {
      background: 'linear-gradient(90deg, #81c784, #a5d6a7)',
      color: '#0d47a1',
    },
    oddRow: {
      background: 'linear-gradient(90deg, #eceff1, #cfd8dc)',
      color: '#37474f',
    },
    evenRow: {
      background: 'linear-gradient(90deg, #cfd8dc, #b0bec5)',
      color: '#37474f',
    },
  }"
></TableAutoScroll>