列表向上滚动工作记录（简洁好方法）

组件
<template>
  <div class="base-table">
    <ul class="base-table-header">
      <li
        v-for="(item, index) in columns"
        :key="index"
        class="base-table-header-column"
        :style="{ width: item.width }"
      >
        {
  
  { item.title }}
      </li>
    </ul>
    <div v-autoscroll="20" class="base-table-body">
      <ul
        v-for="(row, index1) in dataSource"
        :key="index1"
        class="base-table-body-row"
      >
        <li
          v-for="(column, index2) in row"
          :key="index2"
          class="base-table-body-column"
          :style="{ width: column.width }"
        >
          {
  
  { column.content }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

interface PropsType {
  columns: any[]
  data: any[]
}
const props = defineProps<PropsType>()
const dataSource = computed(() =>
  props.data.map((item) =>
    props.columns.map((column) => {
      const content = item[column.dataIndex]
      return {
        content,
        width: column.width,
      }
    })
  )
)
</script>
<style lang="scss" scoped>
.base-table {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .base-table-header {
    display: flex;
    padding: 0;
    margin: 0;
    background: rgb(96 182 255 / 15%);

    li {
      list-style: none;
      background-color: rgb(11 101 140 / 45.1%);
    }
  }

  .base-table-body {
    height: calc(100% - 40px);
    padding: 0;
    margin: 0;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .base-table-body-row {
      display: flex;
      padding: 0;
      margin: 0;

      &:nth-child(even) {
        background-color: #0b658c26;
      }

      .base-table-body-column {
        list-style: none;
      }
    }
  }
}

/* stylelint-disable-next-line no-descending-specificity */
.base-table-header-column,
.base-table-body-column {
  box-sizing: border-box;
  height: 40px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 40px;
  color: #fff;
}
</style>

引用

 <BaseTable :columns="columns" :data="dataSource"></BaseTable>


const columns = [
  {
    title: '偏航方向',
    dataIndex: 'name',
    width: '25%',
  },
  {
    title: '监测时间',
    dataIndex: 'time',
    width: '55%',
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '20%',
  },
]
const dataSource = reactive([
  {
    name: '向西48°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向西38°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向西28°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向西18°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向西8°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向东8°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向东18°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向东28°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向东38°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
  {
    name: '向东48°',
    time: '2023/04/02 12:00',
    status: '正常',
  },
])