{ "slug": "fixedcolumntable", "mode": "single", "examples": [ { "id": "fixedcolumntable-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

FixedColumnTable 固定列表格

\n

列过多时左右列固定,横向滚动查看其余列,固定列带阴影分隔,支持固定表头。

\n
\n
宽表(左固定「姓名」,右固定「操作」)
\n
\n \n \n \n \n \n
\n
\n
← 向左滚动可查看被固定的左列 / 右列 →
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

FixedColumnTable 固定列表格

\n

列过多时左右列固定,横向滚动查看其余列,固定列带阴影分隔,支持固定表头。

\n
宽表(左固定「姓名」,右固定「操作」)
\n
\n \n \n \n \n \n
\n
\n
← 向左滚动可查看被固定的左列 / 右列 →
", "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", "vue3": "\n\n", "vue2": "\n\n", "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 \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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 }