1. ScrollTable

ScrollTable ，它是一个支持自动纵向循环滚动的表格。

1.1 props 属性

| 名称 | 类型 | 描述 | 默认值 | | -------------- | ------- | ------------------ | ------ | | list | array | 表格的数组数据 | [] | | columns | array | 表格列的数组数据 | [] | | stripe | Boolean | 是否斑马线 | true | | limitScrollNum | int | 开始滚动的最小条数 | 5 | | step | number | 滚动速度 | 0.5 | | copyNum | int | 列表复制数据的份数 | 1 | | isScroll | Boolean | 是否开启自动滚动 | true |

1.2 columns 属性

| 名称 | 类型 | 描述 | 默认值 | | ----- | ------ | ------------------ | ------ | | label | string | 表头文字 | | | prop | string | 对应列内容的字段名 | | | width | string | 列宽 | |

1.3 slot 插槽

| 名称 | 描述 | | ------ | ------------------------------------------------------------ | | [prop] | columns 中的 prop 对应一个插槽，内置有 column,row,index 数据 |

1.4 events 事件

| 名称 | 描述 | | ---------- | --------- | | rowClicked | (row)=>{} |

示例

<script>
import { defineComponent } from 'vue';
import vue3-scroll-table-lsq from 'vue3-scroll-table-lsq';

export default defineComponent({
  name: 'ServeDev',
  components: {
    vue3-scroll-table-lsq,
  },
  setup() {
    return {
      list: [
        { name: '我是描述信息1', count: 10, state: '0' },
        { name: '我是描述信息2', count: 12, state: '1' },
        { name: '我是描述信息3', count: 10, state: '0' },
        { name: '我是描述信息4', count: 10, state: '2' },
        { name: '我是描述信息5', count: 18, state: '0' },
        { name: '我是描述信息6', count: 10, state: '1' },
        { name: '我是描述信息7', count: 16, state: '0' },
        { name: '我是描述信息8', count: 16, state: '2' },
        { name: '我是描述信息9', count: 10, state: '0' },
        { name: '我是描述信息10', count: 14, state: '0' },
      ],
      columns: [
        { label: '描述', prop: 'name' },
        { label: '数量', prop: 'count', width: '80px' },
        { label: '状态', prop: '_state' },
      ],
      stateMap: {
        0: { text: '已禁用', color: '#FF6D6E' },
        1: { text: '已启用', color: '#00CE79' },
        2: { text: '已停用', color: '#EBB21A' },
      },
    };
  },
});
</script>

<template>
  <div id="app">
    <p>scrollTable滚动表格组件：</p>
    <vue3-scroll-table-lsq
      class="table-list"
      :step="1"
      :columns="columns"
      :list="list"
      style="height: 200px"
    >
      <template #_state="{ row }">
        <span :style="{ color: stateMap[row.state].color }">{{ stateMap[row.state].text }}</span>
      </template>
    </vue3-scroll-table-lsq>
  </div>
</template>
<style scoped>
#app {
  padding: 30px 60px;
  box-sizing: border-box;
  background: #02091e;
  color: #fff;
}
.table-list {
  background: #062152;
}
.item {
  line-height: 30px;
  padding: 4px 10px;
  border-bottom: 1px solid #333;
}
</style>