37 lines
13 KiB
JSON
37 lines
13 KiB
JSON
{
|
||
"slug": "table",
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "table-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"demo\">\n <h1>Kole UI · Table 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>\n <label style=\"font-size:13px;color:var(--color-text-secondary);\">\n <input id=\"toggleLoading\" type=\"checkbox\" />\n 模拟加载态\n </label>\n <div class=\"kole-table\" role=\"table\" style=\"margin-top:12px\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"checkbox\" id=\"selectAll\" type=\"checkbox\" />\n </th>\n <th class=\"col-fixed\">客户名称</th>\n <th>负责人</th>\n <th class=\"align-right right sortable\" id=\"sortAmount\">\n 合同金额\n <span class=\"sort-ind\" id=\"sortInd\">↕</span>\n </th>\n <th>状态</th>\n <th class=\"col-action action\">操作</th>\n </tr>\n </thead>\n <tbody id=\"tbody\"></tbody>\n </table>\n <div class=\"loading-mask\" id=\"loading\" hidden>\n <span class=\"spinner\"></span>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<h1>Kole UI · Table 组件（纯 H5）</h1>\n<p>对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>\n<label style=\"font-size:13px;color:var(--color-text-secondary);\">\n <input type=\"checkbox\" />\n 模拟加载态\n</label>\n<div class=\"kole-table\" role=\"table\" style=\"margin-top:12px\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"checkbox\" type=\"checkbox\" />\n </th>\n <th>客户名称</th>\n <th>负责人</th>\n <th class=\"align-right sortable\">\n 合同金额\n <span class=\"sort-ind\">↕</span>\n </th>\n <th>状态</th>\n <th class=\"col-action\">操作</th>\n </tr>\n </thead>\n <tbody></tbody>\n </table>\n <div class=\"loading-mask\" hidden>\n <span class=\"spinner\"></span>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleTable } from 'kole-ui/react';\n\nconst columns = [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' }\n];\n\nconst data = [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n];\n\nexport default function ContractTable() {\n const [selectedKeys, setSelectedKeys] = useState([1, 3]);\n const onSortChange = ({ key, order }) => console.log(key, order);\n const renderAction = (row) => <button onClick={() => console.log(row.id)}>编辑</button>;\n return (\n <KoleTable\n columns={columns}\n data={data}\n rowKey=\"id\"\n selectable\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n onSortChange={onSortChange}\n renderAction={renderAction}\n />\n );\n}",
|
||
"vue3": "<template>\n <KoleTable\n :columns=\"columns\"\n :data=\"data\"\n row-key=\"id\"\n selectable\n v-model:selected-keys=\"selectedKeys\"\n @sort-change=\"onSortChange\"\n >\n <template #action=\"{ row }\">\n <button @click=\"edit(row)\">编辑</button>\n </template>\n </KoleTable>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTable } from 'kole-ui/vue3';\n\nconst columns = [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' }\n];\n\nconst data = [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n];\n\nconst selectedKeys = ref([1, 3]);\nconst onSortChange = ({ key, order }) => console.log(key, order);\nconst edit = (row) => console.log('编辑', row.id);\n</script>",
|
||
"vue2": "<template>\n <KoleTable\n :columns=\"columns\"\n :data=\"data\"\n row-key=\"id\"\n selectable\n :selected-keys=\"selectedKeys\"\n @selection-change=\"selectedKeys = $event\"\n @sort-change=\"onSortChange\"\n >\n <template slot=\"action\" slot-scope=\"{ row }\">\n <button @click=\"edit(row)\">编辑</button>\n </template>\n </KoleTable>\n</template>\n\n<script>\nimport { KoleTable } from 'kole-ui/vue2';\n\nexport default {\n name: 'ContractTable',\n components: { KoleTable },\n data() {\n return {\n columns: [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' }\n ],\n\n data: [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n ],\n\n selectedKeys: [1, 3]\n };\n },\n methods: {\n onSortChange({ key, order }) {\n console.log(key, order);\n },\n edit(row) {\n console.log('编辑', row.id);\n }\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleTable } from 'kole-ui/react';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n key: string;\n title: string;\n width?: number;\n fixed?: boolean;\n align?: ColumnAlign;\n sortable?: boolean;\n type?: 'action';\n}\n\ninterface ContractRow {\n id: number;\n name: string;\n owner: string;\n amount: number;\n status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n key: string;\n order: SortOrder;\n}\n\nconst columns: ReadonlyArray<TableColumn> = [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' },\n];\n\nconst data: ReadonlyArray<ContractRow> = [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n];\n\nexport default function ContractTable(): JSX.Element {\n const [selectedKeys, setSelectedKeys] = useState<ReadonlyArray<number>>([1, 3]);\n\n function onSortChange({ key, order }: SortChange): void {\n console.log(key, order);\n }\n function renderAction(row: ContractRow): JSX.Element {\n return <button onClick={() => console.log(row.id)}>编辑</button>;\n }\n\n return (\n <KoleTable\n columns={columns}\n data={data}\n rowKey=\"id\"\n selectable\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n onSortChange={onSortChange}\n renderAction={renderAction}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleTable\n :columns=\"columns\"\n :data=\"data\"\n row-key=\"id\"\n selectable\n v-model:selected-keys=\"selectedKeys\"\n @sort-change=\"onSortChange\"\n >\n <template #action=\"{ row }\">\n <button @click=\"edit(row)\">编辑</button>\n </template>\n </KoleTable>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleTable } from 'kole-ui/vue3';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n key: string;\n title: string;\n width?: number;\n fixed?: boolean;\n align?: ColumnAlign;\n sortable?: boolean;\n type?: 'action';\n}\n\ninterface ContractRow {\n id: number;\n name: string;\n owner: string;\n amount: number;\n status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n key: string;\n order: SortOrder;\n}\n\nconst columns: ReadonlyArray<TableColumn> = [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' },\n];\n\nconst data: ReadonlyArray<ContractRow> = [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n];\n\nconst selectedKeys = ref<ReadonlyArray<number>>([1, 3]);\nfunction onSortChange({ key, order }: SortChange): void {\n console.log(key, order);\n}\nfunction edit(row: ContractRow): void {\n console.log('编辑', row.id);\n}\n</script>",
|
||
"vue2ts": "<template>\n <KoleTable\n :columns=\"columns\"\n :data=\"data\"\n row-key=\"id\"\n selectable\n :selected-keys=\"selectedKeys\"\n @selection-change=\"selectedKeys = $event\"\n @sort-change=\"onSortChange\"\n >\n <template slot=\"action\" slot-scope=\"{ row }\">\n <button @click=\"edit(row)\">编辑</button>\n </template>\n </KoleTable>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTable } from 'kole-ui/vue2';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n key: string;\n title: string;\n width?: number;\n fixed?: boolean;\n align?: ColumnAlign;\n sortable?: boolean;\n type?: 'action';\n}\n\ninterface ContractRow {\n id: number;\n name: string;\n owner: string;\n amount: number;\n status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n key: string;\n order: SortOrder;\n}\n\nexport default Vue.extend({\n name: 'ContractTable',\n components: { KoleTable },\n data(): {\n columns: ReadonlyArray<TableColumn>;\n data: ReadonlyArray<ContractRow>;\n selectedKeys: ReadonlyArray<number>;\n } {\n return {\n columns: [\n { key: 'name', title: '客户名称', width: 180, fixed: true },\n { key: 'owner', title: '负责人' },\n { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n { key: 'status', title: '状态' },\n { key: 'action', title: '操作', type: 'action' },\n ],\n data: [\n { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n ],\n selectedKeys: [1, 3],\n };\n },\n methods: {\n onSortChange({ key, order }: SortChange): void {\n console.log(key, order);\n },\n edit(row: ContractRow): void {\n console.log('编辑', row.id);\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Table.html:59-65 表头列定义（客户名称 col-fixed / 合同金额 sortable+align-right / 操作 col-action）、:74-79 四行数据、:111-125 行选择、:131-137 排序"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|