40 lines
9.0 KiB
JSON
40 lines
9.0 KiB
JSON
{
|
||
"slug": "treetable",
|
||
"curated": true,
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "treetable-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"demo\">\n <h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n <div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody id=\"ttBody\"></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\" id=\"sumCount\">0</td>\n <td class=\"align-right\" id=\"sumBudget\">0</td>\n </tr>\n </tfoot>\n </table>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n<p>对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n<div class=\"kole-tt\" role=\"table\">\n <table>\n <thead>\n <tr>\n <th class=\"col-selection\" style=\"width:48px\">\n <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n </th>\n <th>部门 / 人员</th>\n <th class=\"align-right\">人数</th>\n <th class=\"align-right\">预算(万)</th>\n </tr>\n </thead>\n <tbody></tbody>\n <tfoot>\n <tr>\n <td></td>\n <td>合计</td>\n <td class=\"align-right\">0</td>\n <td class=\"align-right\">0</td>\n </tr>\n </tfoot>\n </table>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleTreeTable } from 'kole-ui/react';\n\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n\nfunction DeptTreeTable() {\n const [selectedKeys, setSelectedKeys] = useState([]);\n return (\n <KoleTreeTable\n columns={COLUMNS}\n data={DATA}\n selectable\n summaryColumn=\"budget\"\n summary={{ label: '合计' }}\n defaultExpandedKeys={['tech', 'product']}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n />\n );\n}",
|
||
"vue3": "<template>\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n v-model:selected-keys=\"selectedKeys\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTreeTable } from 'kole-ui/vue3';\n\nconst selectedKeys = ref([]);\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n</script>",
|
||
"vue2": "<template>\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n :selected-keys=\"selectedKeys\"\n @update:selectedKeys=\"selectedKeys = $event\"\n />\n</template>\n\n<script>\nimport { KoleTreeTable } from 'kole-ui/vue2';\nexport default {\n components: { KoleTreeTable },\n data() {\n return {\n selectedKeys: [],\n COLUMNS: [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n ],\n DATA: [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleTreeTable } from 'kole-ui/react';\n\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n\nfunction DeptTreeTable(): JSX.Element {\n const [selectedKeys, setSelectedKeys] = useState<unknown[]>([]);\n return (\n <KoleTreeTable\n columns={COLUMNS}\n data={DATA}\n selectable\n summaryColumn=\"budget\"\n summary={{ label: '合计' }}\n defaultExpandedKeys={['tech', 'product']}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n />\n );\n}\n\nexport default DeptTreeTable;",
|
||
"vue3ts": "<template>\n\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n v-model:selected-keys=\"selectedKeys\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTreeTable } from 'kole-ui/vue3';\n\nconst selectedKeys = ref<unknown[]>([]);\nconst COLUMNS = [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst DATA = [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleTreeTable\n :columns=\"COLUMNS\"\n :data=\"DATA\"\n selectable\n summary-column=\"budget\"\n :summary=\"{ label: '合计' }\"\n :default-expanded-keys=\"['tech', 'product']\"\n :selected-keys=\"selectedKeys\"\n @update:selectedKeys=\"selectedKeys = $event\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTreeTable } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTreeTable },\n data(): Record<string, unknown> {\n return {\n selectedKeys: [],\n COLUMNS: [\n { key: 'name', title: '部门 / 人员' },\n { key: 'count', title: '人数', align: 'right' },\n { key: 'budget', title: '预算(万)', align: 'right' }\n ],\n DATA: [\n { key: 'tech', name: '技术中心', children: [\n { key: 'fe', name: '前端组', count: 12, budget: 80 },\n { key: 'be', name: '后端组', count: 18, budget: 120 }\n ] },\n { key: 'product', name: '产品中心', children: [\n { key: 'pm', name: '产品组', count: 8, budget: 60 },\n { key: 'ux', name: '设计组', count: 6, budget: 40 }\n ] }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/TreeTable.html 第 53-62 行的 treeData（tech/product 两级，叶子带 count、budget）与第 64 行 expanded = [\"tech\",\"product\"]，表头三列标题取自第 41-43 行的「部门 / 人员」「人数」「预算(万)」。",
|
||
"列定义与汇总列对应四端实现：columns / summaryColumn（frameworks/TreeTable.jsx 第 25-34 行参数表、frameworks/TreeTable.vue3.vue 第 55-63 行 defineProps），父级汇总即 leafSum，见 TreeTable.jsx 第 14 行。"
|
||
]
|
||
}
|
||
]
|
||
}
|