40 lines
11 KiB
JSON
40 lines
11 KiB
JSON
{
|
|
"slug": "fixedcolumntable",
|
|
"mode": "single",
|
|
"examples": [
|
|
{
|
|
"id": "fixedcolumntable-ex-1",
|
|
"title": "基础用法",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-page\">\n <h2 class=\"kole-h2\">FixedColumnTable 固定列表格</h2>\n <p class=\"kole-desc\">列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>\n <div class=\"kole-demo\">\n <div class=\"kole-demo__title\">宽表（左固定「姓名」，右固定「操作」）</div>\n <div class=\"kole-fixtable-wrap\">\n <table class=\"kole-fixtable\" id=\"fixtable\">\n <thead>\n <tr id=\"fixhead\"></tr>\n </thead>\n <tbody id=\"fixbody\"></tbody>\n </table>\n </div>\n <div class=\"kole-hint\">← 向左滚动可查看被固定的左列 / 右列 →</div>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0
|
|
]
|
|
],
|
|
"hide": [],
|
|
"mode": "single"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<h2>FixedColumnTable 固定列表格</h2>\n<p>列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>\n<div>宽表（左固定「姓名」，右固定「操作」）</div>\n<div class=\"kole-fixtable-wrap\">\n <table class=\"kole-fixtable\" id=\"fixtable\">\n <thead>\n <tr></tr>\n </thead>\n <tbody></tbody>\n </table>\n</div>\n<div class=\"kole-hint\">← 向左滚动可查看被固定的左列 / 右列 →</div>",
|
|
"jsx": "import { KoleFixedColumnTable } from 'kole-ui/react';\n\nconst columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\n// fixed: 'left' / 'right' 固定首末列，其余列横向滚动；w 为该列最小宽度\n<KoleFixedColumnTable data={data} columns={columns} />",
|
|
"vue3": "<script setup>\nimport { KoleFixedColumnTable } from 'kole-ui/vue3';\n\nconst columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n</script>\n\n<template>\n <!-- fixed 为 left / right 的列固定并带阴影分隔；w 为该列最小宽度 -->\n <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>",
|
|
"vue2": "<template>\n <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script>\nimport { KoleFixedColumnTable } from 'kole-ui/vue2';\n\nconst columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\nexport default {\n name: 'FixedColumnTableDemo',\n components: { KoleFixedColumnTable },\n data() { return { columns, data }; },\n};\n</script>",
|
|
"tsx": "import { KoleFixedColumnTable } from 'kole-ui/react';\n\nexport default function KoleFixedColumnTableDemo(): JSX.Element {\n const columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n ];\n \n const data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n ];\n \n // fixed: 'left' / 'right' 固定首末列，其余列横向滚动；w 为该列最小宽度\n return (\n <KoleFixedColumnTable data={data} columns={columns} />\n );\n}",
|
|
"vue3ts": "<template>\n\n <!-- fixed 为 left / right 的列固定并带阴影分隔；w 为该列最小宽度 -->\n <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFixedColumnTable } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFixedColumnTable } from 'kole-ui/vue2';\n\nconst columns = [\n { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n { key: 'dept', title: '部门', w: 120 },\n { key: 'role', title: '角色', w: 120 },\n { key: 'email', title: '邮箱', w: 200 },\n { key: 'phone', title: '电话', w: 140 },\n { key: 'city', title: '城市', w: 120 },\n { key: 'join', title: '入职', w: 120 },\n { key: 'status', title: '状态', w: 100 },\n { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\nexport default {\n name: 'FixedColumnTableDemo',\n components: { KoleFixedColumnTable },\n data(): Record<string, unknown> { return { columns, data }; },\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/FixedColumnTable.html:28-45 的 cols（姓名 fixed:left / 操作 fixed:right / 各列 w）与 4 行 data",
|
|
"data / columns 形参见 FixedColumnTable.jsx 与 FixedColumnTable.vue3.vue defineProps；固定类 kole-fixed-left / kole-fixed-right 见 FixedColumnTable.css"
|
|
]
|
|
}
|
|
],
|
|
"curated": true
|
|
}
|