@duskmoon-dev/el-table (日语)
完整的数据表网页组件,包含排序、页码和行选择.
安装
npm install @duskmoon-dev/el-table
使用量
数据 API
<el-dm-table id="my-table" paginated selection-mode="multiple" striped></el-dm-table>
<script type="module">
import '@duskmoon-dev/el-table/register';
const table = document.getElementById('my-table');
table.columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'Email', sortable: true },
{ key: 'role', label: 'Role', width: '120px' },
];
table.data = [
{ id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
{ id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' },
];
</script>
声明性 API
<el-dm-table paginated page-size="5">
<el-dm-table-column key="name" label="Name" sortable></el-dm-table-column>
<el-dm-table-column key="email" label="Email" sortable></el-dm-table-column>
<el-dm-table-column key="role" label="Role" width="120px"></el-dm-table-column>
</el-dm-table>
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
columns | TableColumn[] | [] | 栏定义 |
data | TableRow[] | [] | 行数据 |
sort-column | string | - 说吧 | 当前排序列密钥 |
sort-direction | 'asc' | 'desc' | 'asc' | 排序方向 |
paginated | boolean | false | 启用页码 |
page | number | 1 | 当前页面 |
page-size | number | 10 | 每页行数 |
selection-mode | 'none' | 'single' | 'multiple' | 'none' | 选择模式 |
striped | boolean | false | 替换行颜色 |
bordered | boolean | false | 单元格边框 |
hoverable | boolean | true | 行徘徊效果 |
compact | boolean | false | 减少补丁 |
sticky-header | boolean | false | 滚动的固定页眉 |
loading | boolean | false | 装入状态 |
empty-message | string | 'No data available' | 空状态文本 |
活动
| 活动 | 细节 | 说明 |
|---|---|---|
sort | { column, direction } | 排序更改时被解除 |
select | { selectedIds, selectedRows } | 选择变更时被解除 |
page-change | { page, pageSize } | 当页面更改时被解除 |
row-click | { row, rowIndex } | 单击行时已开火 |
CSS 自定义属性
表格使用 CSS 自定义属性 @duskmoon-dev/el-base 主题:
--color-surface- 表格背景--color-surface-variant- 标题/背景--color-on-surface- 文本颜色--color-outline- 边框颜色--color-primary- 排序指示器, 选择高亮--radius-md- 边界半径