Terminal H5 Components

安装

使用 npm 安装：

npm install terminal-h5-components

使用

按需引入组件 如果你只需要引入特定的组件，例如 CTable：

import { CTable } from 'terminal-h5-components'

// 使用 CTable 组件

引入整个库 如果你想引入整个组件库：

import TerminalH5Components from 'terminal-h5-components'

table 组件

API

• columns (Array): 表格列的配置数组，每个列对象包含以下属性：

  • dataIndex (String): 列数据在数据项中对应的 key。
  • title (String): 列标题。
  • slotScope (String, 可选): 插槽名称，用于自定义列内容。
  • ellipsis (Boolean, 可选): 是否显示省略号。
  • width (Number, 可选): 列宽度。
  • key (String, 可选): 列的唯一标识。

• dataSource (Array): 表格数据源数组。

• rowKey (String): 表格行的唯一标识字段。

• total (Number): 数据总条数。

• pageType (String, 可选): 翻页方式 默认scroll 滚动翻页，可配置button为分页导航器

• rowHeight (Number, 可选): 行高，默认值为 getRelativeSizeBasedOnWidth(66)。

• checkable (Boolean, 可选): 是否显示复选框，默认值为 false。

• loading (Boolean, 可选): 是否显示加载状态，默认值为 false。

事件

• load (Function): 加载更多数据时触发，参数为 pageNum 和 pageSize。

• check (Function): 复选框状态变化时触发，参数为选中的数据数组。

示例

<template>
  <table-component
    :columns="columns"
    :dataSource="dataSource"
    rowKey="id"
    pageType="scroll"
    :total="total"
    :checkable="true"
    :loading="loading"
    @load="handleLoad"
    @check="handleCheck"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TableComponent from '@/components/table/index.vue'

const columns = [
  { dataIndex: 'name', title: '姓名' },
  { dataIndex: 'age', title: '年龄' },
  { dataIndex: 'address', title: '地址' },
]

const dataSource = ref(
  Array.from({ length: pageSize }, (v, i) => {
    return { id: pageSize * i, name: '张三', age: 22, address: '北京' }
  }),
)

const total = ref(100)
const loading = ref(false)

function handleLoad(pageNum: number, pageSize: number) {
  // 加载更多数据的逻辑
}

function handleCheck(selectedRows: any[]) {
  // 处理选中的数据
}
</script>