1.1.0 • Published 11 months ago
terminal-h5-components v1.1.0
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>
1.0.2
11 months ago
1.1.0
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago
0.0.10
11 months ago
0.0.11
11 months ago
0.0.12
11 months ago
0.0.13
11 months ago
0.0.14
11 months ago
1.0.3
11 months ago
0.0.15
11 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.5
11 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago