@next-bricks/advanced 0.51.5 → 0.51.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bricks.json +11 -11
- package/dist/chunks/8382.ade8275e.js.map +1 -1
- package/dist/chunks/eo-cascader.8d423eaa.js.map +1 -1
- package/dist/chunks/eo-next-table.7f8c557a.js.map +1 -1
- package/dist/chunks/eo-tree-select.49c195a4.js.map +1 -1
- package/dist/examples.json +6 -6
- package/dist/{index.61a04a59.js → index.f63870d2.js} +2 -2
- package/dist/{index.61a04a59.js.map → index.f63870d2.js.map} +1 -1
- package/dist/manifest.json +213 -213
- package/dist/types.json +554 -554
- package/dist-types/cascader/index.d.ts +2 -1
- package/dist-types/next-table/index.d.ts +1 -0
- package/dist-types/tree-select/index.d.ts +2 -1
- package/package.json +2 -2
package/dist/examples.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"eo-table": {
|
|
3
|
-
"doc": "---\ntagName: eo-table\ndisplayName: WrappedEoTable\ndescription: 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\ncategory: table\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-table\n\n> 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------------------------------------- | --------------------------------------------------------------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| showCard | `any` | 否 | `true` | 是否显示外层卡片 |\n| rowSelection | `false \\| TableRowSelection<any>` | 否 | - | 表格行是否可选择，具体查阅：[rowSelection](https://ant.design/components/table-cn/#rowSelection) |\n| rowKey | `string` | 否 | - | 指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。 |\n| hiddenColumns | `Array<string \\| number>` | 否 | - | 隐藏相应列（输入对应的 dataIndex 或者 key 即可） |\n| showSelectInfo | `any` | 否 | `false` | 是否显示已选择信息和清除按钮。仅在设置了 `rowSelection` 时有效。 |\n| filters | `Record<string, string[]>` | 否 | - | 表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。 |\n| configProps | `any` | 否 | - | ant-design 的 Table 相关配置项，具体查阅：[Table](https://ant.design/components/table-cn/#Table) |\n| sort | `string` | 否 | - | 被排序列的 dataIndex。通常来自于 url 参数，可以设置成 `${QUERY.sort}`。 |\n| order | `string \\| number` | 否 | - | 升序/降序，可以设置成 `${QUERY.order}`。 |\n| rowDisabledConfig | `RowDisabledProps \\| RowDisabledProps[]` | 否 | - | 配置每一行是否禁用，field 表示数据源中的字段路径，value 表示与其字段比较的值，operator 表示两者比较的方法，结果为 true 时会禁用当前行 |\n| expandedRowBrick | `{ useBrick?: UseSingleBrickConf }` | 否 | - | 自定义行展开的构件 |\n| expandIcon | `{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }` | 否 | - | 自定义展开图标。 |\n| expandIconAsCell | `any` | 否 | `true` | 展开的图标是否为一个单元格，默认显示在第一列 |\n| expandIconColumnIndex | `number` | 否 | - | 展开的图标显示在哪一列，当 `expandIconAsCell` 为 false 时生效 |\n| expandRowByClick | `boolean` | 否 | - | 通过点击行来展开子行 |\n| optimizedColumns | `Array<string \\| number>` | 否 | - | 优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列 |\n| stripEmptyExpandableChildren | `any` | 否 | `false` | 树形数据展示时是否需要去除空数组 |\n| defaultExpandAllRows | `boolean` | 否 | - | 初始时，是否展开所有行 |\n| ellipsisInfo | `boolean` | 否 | - | 是否显示省略信息 |\n| expandedRowKeys | `string[]` | 否 | - | 展开的行的 rowKey |\n| selectAllChildren | `boolean` | 否 | - | 树形数据展示时，行选择父节点是否同步勾选/取消勾选所有子节点 |\n| defaultSelectAll | `boolean` | 否 | - | 是否默认选择所有行 |\n| childrenColumnName | `any` | 否 | `\"children\"` | 指定树形结构的列名 |\n| sortable | `any` | 否 | `true` | 是否支持排序。当对应列的 sorter 设置成 true 时则可排序 |\n| frontSearch | `boolean` | 否 | - | 是否前端进行搜索，配合 `presentational-bricks.brick-input` 使用 |\n| frontSearchQuery | `any` | 否 | `\"\"` | 前端搜索参数 |\n| exactSearch | `boolean` | 否 | - | 是否精确搜索 |\n| frontSearchFilterKeys | `string[]` | 否 | - | 进行前端搜索的字段，支持嵌套的写法如 `[\"name\",\"value.a\"]` |\n| page | `number` | 否 | - | 页码 |\n| pageSize | `number` | 否 | - | 页码条数 |\n| scrollConfigs | `TableProps[\"scroll\"]` | 否 | `{ x: true }` | 表格是否可滚动，也可以指定滚动区域的宽、高 |\n| qField | `any` | 否 | `\"q\"` | 把过滤条件更新到 url 时的字段名 |\n| tableDraggable | `boolean` | 否 | - | 表格行是否可拖拽，注意，树形数据的表格不支持该功能 |\n| zebraPattern | `boolean` | 否 | - | 是否展示斑马纹 |\n| storeCheckedByUrl | `boolean` | 否 | - | 翻页时是否记住之前选中的项 |\n| extraRows | `Record<string, unknown>[]` | 否 | `[]` | 额外的行，通常为跨页勾选时，不在当前页的行 |\n| autoSelectParentWhenAllChildrenSelected | `boolean` | 否 | - | 当所有子节点选中时，自动选中父节点 |\n| thTransparent | `boolean` | 否 | - | 表格表头是否透明 |\n| showHeader | `any` | 否 | `true` | 是否显示表头 |\n| pagination | `false \\| TablePaginationConfig` | 否 | - | 是否显示分页 |\n| size | `SizeType \\| \"x-small\"` | 否 | - | 表格大小（antd 原生 size） |\n| type | `RowSelectionType` | 否 | - | 选框类型（单选/多选） |\n| shouldUpdateUrlParams | `any` | 否 | `true` | 是否更新 url 参数 |\n| shouldRenderWhenUrlParamsUpdate | `any` | 否 | `true` | 更新 url 参数时是否触发页面重新渲染 |\n| selectedRowKeys | `React.Key[]` | 否 | `[]` | 指定选中项的 key 数组 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ---------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |\n| page.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 页码变化 |\n| filter.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 每页条数变化 |\n| select.update | `Record<string, any>[]` — 选中的行数据数组 | 勾选框变化，detail 中为所选的行数据 |\n| select.row.keys.update | `string[]` — 选中的行 key 集合 | 勾选框变化，detail 中为所选的行 key 集合 |\n| sort.update | `SortUpdateEventDetail` — { sort: 排序列的 key/dataIndex, order: 升序/降序 } | 排序变化 |\n| row.expand | `RowExpandEventDetail` — { expanded: 是否展开, record: 被点击的行数据 } | 点击展开图标时触发 |\n| expand.rows.change | `ExpandRowsChangeEventDetail` — { expandedRows: 当前展开的所有行的 rowKey 集合 } | 展开的行变化时触发 |\n| row.drag | `RowDragEventDetail` — { data: 拖拽后重新排序的所有行数据 } | 表格行拖拽结束发生的事件 |\n\n## Methods\n\n| 方法 | 参数 | 返回值 | 说明 |\n| ---------------- | ------------------------------ | ------ | ---------- |\n| filterSourceData | `(event: CustomEvent) => void` | `void` | 搜索过滤 |\n| expandAll | `() => void` | `void` | 展开所有行 |\n\n## Examples\n\n### Basic\n\n展示表格的基本用法，配置 columns 和 dataSource 展示列表数据。\n\n```yaml preview\n- brick: eo-table\n properties:\n showCard: false\n rowKey: key\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Row Selection\n\n配置 rowSelection 开启行选择，通过 select.update 事件获取选中行数据。\n\n```yaml preview\n- brick: eo-table\n events:\n select.update:\n - action: console.log\n select.row.keys.update:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n rowSelection: true\n showSelectInfo: true\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n# show-card=\"false\"\n# row-key=\"key\"\n# show-select-info=\"true\"\n# id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"select.update\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"select.row.keys.update\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expandable\n\n配置 expandedRowBrick 自定义展开行内容，通过 row.expand 事件监听展开状态变化。\n\n```yaml preview\n- brick: eo-table\n events:\n row.expand:\n - action: console.log\n expand.rows.change:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n expandedRowBrick:\n useBrick:\n brick: span\n properties:\n textContent: <% DATA.rowData.address %>\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandedRowBrick = {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# textContent: \"<% DATA.rowData.address %>\",\n# },\n# },\n# };\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expand.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Sortable\n\n配置 sorter 列实现排序功能，通过 sort.update 事件获取排序变化。\n\n```yaml preview\n- brick: eo-table\n events:\n sort.update:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n sorter: true\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# sorter: true,\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"sort.update\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Draggable\n\n开启 tableDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。\n\n```yaml preview\n- brick: eo-table\n events:\n row.drag:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n tableDraggable: true\n configProps:\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n# show-card=\"false\"\n# row-key=\"key\"\n# table-draggable\n# id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# pagination: false,\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.drag\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
4
|
-
},
|
|
5
2
|
"eo-cascader": {
|
|
6
3
|
"doc": "---\ntagName: eo-cascader\ndisplayName: WrappedEoCascader\ndescription: 级联选择器\ncategory: form-input-basic\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-cascader\n\n> 级联选择器\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| -------------- | ------------------------------------ | ---- | ---------------------------------------------------------- | ------------------------------------------------------------- |\n| name | `string` | 否 | - | 表单字段名 |\n| label | `string` | 否 | - | 表单字段标签 |\n| required | `boolean` | 否 | - | 是否为必填项 |\n| options | `AntdCascaderProps[\"options\"]` | 否 | - | 可选项数据源 |\n| fieldNames | `AntdCascaderProps[\"fieldNames\"]` | 否 | `{ label: \"label\", value: \"value\", children: \"children\" }` | 自定义字段名，指定 label、value、children 对应的字段 |\n| value | `AntdCascaderProps[\"value\"]` | 否 | - | 当前选中的值 |\n| placeholder | `string` | 否 | - | 输入框占位文本 |\n| multiple | `boolean` | 否 | - | 是否支持多选 |\n| disabled | `boolean` | 否 | - | 是否禁用 |\n| allowClear | `boolean` | 否 | `true` | 是否支持清除 |\n| showSearch | `boolean` | 否 | `true` | 是否支持搜索，开启后可通过输入关键字过滤选项 |\n| suffixIcon | `GeneralIconProps` | 否 | - | 自定义下拉箭头图标 |\n| expandTrigger | `AntdCascaderProps[\"expandTrigger\"]` | 否 | `\"click\"` | 次级菜单的展开方式，可选 click 或 hover |\n| popupPlacement | `AntdCascaderProps[\"placement\"]` | 否 | `\"bottomLeft\"` | 浮层预设位置，可选 bottomLeft、bottomRight、topLeft、topRight |\n| size | `AntdCascaderProps[\"size\"]` | 否 | - | 输入框大小，可选 large、middle、small |\n| limit | `number` | 否 | `50` | 搜索结果的最大条数，0 表示不限制 |\n| maxTagCount | `number \\| \"responsive\"` | 否 | - | 多选模式下最多显示的 tag 数量，设为 responsive 时会自适应宽度 |\n| cascaderStyle | `CSSProperties` | 否 | - | 级联选择器的内联样式 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| --------------- | -------------------------------------------------------------------------------------------- | ------------------------ |\n| cascader.change | `CascaderChangeEventDetail` — { value: 选择的值, selectedOptions: 选择的值所对应的 options } | 级联选择项输入变化时触发 |\n\n## Examples\n\n### Basic\n\n展示级联选择器的基本用法，通过 options 提供层级数据源。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 请选择城市\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用级联选择器，配置 name、label 和 required 实现表单集成与校验。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n events:\n validate.success:\n - action: console.log\n values.change:\n - action: console.log\n children:\n - brick: eo-cascader\n properties:\n label: 城市选择\n name: city\n placeholder: 请选择城市\n required: true\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n events:\n cascader.change:\n - action: console.log\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-cascader\n# label=\"城市选择\"\n# name=\"city\"\n# placeholder=\"请选择城市\"\n# required\n# id=\"brick-2\"\n# ></eo-cascader>\n# <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# brick_2.addEventListener(\"cascader.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Multiple Selection\n\n开启多选模式，并配置 maxTagCount 限制最多显示的 tag 数量。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 请选择城市（可多选）\n multiple: true\n maxTagCount: 2\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n events:\n cascader.change:\n - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader\n# placeholder=\"请选择城市（可多选）\"\n# multiple\n# id=\"brick-1\"\n# ></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.maxTagCount = 2;\n# brick_1.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# brick_1.addEventListener(\"cascader.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Custom Field Names\n\n使用 fieldNames 自定义数据源中 label、value、children 对应的字段名。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 请选择分类\n fieldNames:\n label: name\n value: id\n children: sub\n options:\n - id: tech\n name: 技术\n sub:\n - id: frontend\n name: 前端\n sub:\n - id: react\n name: React\n - id: vue\n name: Vue\n - id: backend\n name: 后端\n sub:\n - id: java\n name: Java\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择分类\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.fieldNames = {\n# label: \"name\",\n# value: \"id\",\n# children: \"sub\",\n# };\n# brick_1.options = [\n# {\n# id: \"tech\",\n# name: \"技术\",\n# sub: [\n# {\n# id: \"frontend\",\n# name: \"前端\",\n# sub: [\n# {\n# id: \"react\",\n# name: \"React\",\n# },\n# {\n# id: \"vue\",\n# name: \"Vue\",\n# },\n# ],\n# },\n# {\n# id: \"backend\",\n# name: \"后端\",\n# sub: [\n# {\n# id: \"java\",\n# name: \"Java\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Disabled and Size\n\n展示禁用状态和不同尺寸（large、middle、small）的级联选择器。\n\n```yaml preview minHeight=\"300px\"\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n gap: 12px\n children:\n - brick: eo-cascader\n properties:\n placeholder: Large 尺寸\n size: large\n options:\n - label: Zhejiang\n value: zhejiang\n children:\n - label: Hangzhou\n value: hangzhou\n children:\n - label: West Lake\n value: xihu\n - brick: eo-cascader\n properties:\n placeholder: Small 尺寸\n size: small\n options:\n - label: Zhejiang\n value: zhejiang\n children:\n - label: Hangzhou\n value: hangzhou\n children:\n - label: West Lake\n value: xihu\n - brick: eo-cascader\n properties:\n placeholder: 禁用状态\n disabled: true\n options:\n - label: Zhejiang\n value: zhejiang\n children:\n - label: Hangzhou\n value: hangzhou\n children:\n - label: West Lake\n value: xihu\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 12px\">\n# <eo-cascader placeholder=\"Large 尺寸\" size=\"large\" id=\"brick-1\"></eo-cascader>\n# <eo-cascader placeholder=\"Small 尺寸\" size=\"small\" id=\"brick-2\"></eo-cascader>\n# <eo-cascader placeholder=\"禁用状态\" disabled id=\"brick-3\"></eo-cascader>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# children: [\n# {\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# children: [\n# {\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\n# {\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# children: [\n# {\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Custom Style and Icon\n\n通过 cascaderStyle 设置内联样式，通过 suffixIcon 自定义下拉箭头图标。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 自定义样式与图标\n suffixIcon:\n lib: antd\n icon: down\n cascaderStyle:\n width: 300px\n expandTrigger: hover\n options:\n - label: Zhejiang\n value: zhejiang\n children:\n - label: Hangzhou\n value: hangzhou\n children:\n - label: West Lake\n value: xihu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader\n# placeholder=\"自定义样式与图标\"\n# expand-trigger=\"hover\"\n# id=\"brick-1\"\n# ></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.suffixIcon = {\n# lib: \"antd\",\n# icon: \"down\",\n# };\n# brick_1.cascaderStyle = {\n# width: \"300px\",\n# };\n# brick_1.options = [\n# {\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# children: [\n# {\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n"
|
|
7
4
|
},
|
|
5
|
+
"eo-table": {
|
|
6
|
+
"doc": "---\ntagName: eo-table\ndisplayName: WrappedEoTable\ndescription: 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\ncategory: table\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-table\n\n> 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------------------------------------- | --------------------------------------------------------------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| showCard | `any` | 否 | `true` | 是否显示外层卡片 |\n| rowSelection | `false \\| TableRowSelection<any>` | 否 | - | 表格行是否可选择，具体查阅：[rowSelection](https://ant.design/components/table-cn/#rowSelection) |\n| rowKey | `string` | 否 | - | 指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。 |\n| hiddenColumns | `Array<string \\| number>` | 否 | - | 隐藏相应列（输入对应的 dataIndex 或者 key 即可） |\n| showSelectInfo | `any` | 否 | `false` | 是否显示已选择信息和清除按钮。仅在设置了 `rowSelection` 时有效。 |\n| filters | `Record<string, string[]>` | 否 | - | 表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。 |\n| configProps | `any` | 否 | - | ant-design 的 Table 相关配置项，具体查阅：[Table](https://ant.design/components/table-cn/#Table) |\n| sort | `string` | 否 | - | 被排序列的 dataIndex。通常来自于 url 参数，可以设置成 `${QUERY.sort}`。 |\n| order | `string \\| number` | 否 | - | 升序/降序，可以设置成 `${QUERY.order}`。 |\n| rowDisabledConfig | `RowDisabledProps \\| RowDisabledProps[]` | 否 | - | 配置每一行是否禁用，field 表示数据源中的字段路径，value 表示与其字段比较的值，operator 表示两者比较的方法，结果为 true 时会禁用当前行 |\n| expandedRowBrick | `{ useBrick?: UseSingleBrickConf }` | 否 | - | 自定义行展开的构件 |\n| expandIcon | `{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }` | 否 | - | 自定义展开图标。 |\n| expandIconAsCell | `any` | 否 | `true` | 展开的图标是否为一个单元格，默认显示在第一列 |\n| expandIconColumnIndex | `number` | 否 | - | 展开的图标显示在哪一列，当 `expandIconAsCell` 为 false 时生效 |\n| expandRowByClick | `boolean` | 否 | - | 通过点击行来展开子行 |\n| optimizedColumns | `Array<string \\| number>` | 否 | - | 优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列 |\n| stripEmptyExpandableChildren | `any` | 否 | `false` | 树形数据展示时是否需要去除空数组 |\n| defaultExpandAllRows | `boolean` | 否 | - | 初始时，是否展开所有行 |\n| ellipsisInfo | `boolean` | 否 | - | 是否显示省略信息 |\n| expandedRowKeys | `string[]` | 否 | - | 展开的行的 rowKey |\n| selectAllChildren | `boolean` | 否 | - | 树形数据展示时，行选择父节点是否同步勾选/取消勾选所有子节点 |\n| defaultSelectAll | `boolean` | 否 | - | 是否默认选择所有行 |\n| childrenColumnName | `any` | 否 | `\"children\"` | 指定树形结构的列名 |\n| sortable | `any` | 否 | `true` | 是否支持排序。当对应列的 sorter 设置成 true 时则可排序 |\n| frontSearch | `boolean` | 否 | - | 是否前端进行搜索，配合 `presentational-bricks.brick-input` 使用 |\n| frontSearchQuery | `any` | 否 | `\"\"` | 前端搜索参数 |\n| exactSearch | `boolean` | 否 | - | 是否精确搜索 |\n| frontSearchFilterKeys | `string[]` | 否 | - | 进行前端搜索的字段，支持嵌套的写法如 `[\"name\",\"value.a\"]` |\n| page | `number` | 否 | - | 页码 |\n| pageSize | `number` | 否 | - | 页码条数 |\n| scrollConfigs | `TableProps[\"scroll\"]` | 否 | `{ x: true }` | 表格是否可滚动，也可以指定滚动区域的宽、高 |\n| qField | `any` | 否 | `\"q\"` | 把过滤条件更新到 url 时的字段名 |\n| tableDraggable | `boolean` | 否 | - | 表格行是否可拖拽，注意，树形数据的表格不支持该功能 |\n| zebraPattern | `boolean` | 否 | - | 是否展示斑马纹 |\n| storeCheckedByUrl | `boolean` | 否 | - | 翻页时是否记住之前选中的项 |\n| extraRows | `Record<string, unknown>[]` | 否 | `[]` | 额外的行，通常为跨页勾选时，不在当前页的行 |\n| autoSelectParentWhenAllChildrenSelected | `boolean` | 否 | - | 当所有子节点选中时，自动选中父节点 |\n| thTransparent | `boolean` | 否 | - | 表格表头是否透明 |\n| showHeader | `any` | 否 | `true` | 是否显示表头 |\n| pagination | `false \\| TablePaginationConfig` | 否 | - | 是否显示分页 |\n| size | `SizeType \\| \"x-small\"` | 否 | - | 表格大小（antd 原生 size） |\n| type | `RowSelectionType` | 否 | - | 选框类型（单选/多选） |\n| shouldUpdateUrlParams | `any` | 否 | `true` | 是否更新 url 参数 |\n| shouldRenderWhenUrlParamsUpdate | `any` | 否 | `true` | 更新 url 参数时是否触发页面重新渲染 |\n| selectedRowKeys | `React.Key[]` | 否 | `[]` | 指定选中项的 key 数组 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ---------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |\n| page.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 页码变化 |\n| filter.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 每页条数变化 |\n| select.update | `Record<string, any>[]` — 选中的行数据数组 | 勾选框变化，detail 中为所选的行数据 |\n| select.row.keys.update | `string[]` — 选中的行 key 集合 | 勾选框变化，detail 中为所选的行 key 集合 |\n| sort.update | `SortUpdateEventDetail` — { sort: 排序列的 key/dataIndex, order: 升序/降序 } | 排序变化 |\n| row.expand | `RowExpandEventDetail` — { expanded: 是否展开, record: 被点击的行数据 } | 点击展开图标时触发 |\n| expand.rows.change | `ExpandRowsChangeEventDetail` — { expandedRows: 当前展开的所有行的 rowKey 集合 } | 展开的行变化时触发 |\n| row.drag | `RowDragEventDetail` — { data: 拖拽后重新排序的所有行数据 } | 表格行拖拽结束发生的事件 |\n\n## Methods\n\n| 方法 | 参数 | 返回值 | 说明 |\n| ---------------- | ------------------------------ | ------ | ---------- |\n| filterSourceData | `(event: CustomEvent) => void` | `void` | 搜索过滤 |\n| expandAll | `() => void` | `void` | 展开所有行 |\n\n## Examples\n\n### Basic\n\n展示表格的基本用法，配置 columns 和 dataSource 展示列表数据。\n\n```yaml preview\n- brick: eo-table\n properties:\n showCard: false\n rowKey: key\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Row Selection\n\n配置 rowSelection 开启行选择，通过 select.update 事件获取选中行数据。\n\n```yaml preview\n- brick: eo-table\n events:\n select.update:\n - action: console.log\n select.row.keys.update:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n rowSelection: true\n showSelectInfo: true\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n# show-card=\"false\"\n# row-key=\"key\"\n# show-select-info=\"true\"\n# id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"select.update\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"select.row.keys.update\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expandable\n\n配置 expandedRowBrick 自定义展开行内容，通过 row.expand 事件监听展开状态变化。\n\n```yaml preview\n- brick: eo-table\n events:\n row.expand:\n - action: console.log\n expand.rows.change:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n expandedRowBrick:\n useBrick:\n brick: span\n properties:\n textContent: <% DATA.rowData.address %>\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandedRowBrick = {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# textContent: \"<% DATA.rowData.address %>\",\n# },\n# },\n# };\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expand.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Sortable\n\n配置 sorter 列实现排序功能，通过 sort.update 事件获取排序变化。\n\n```yaml preview\n- brick: eo-table\n events:\n sort.update:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n configProps:\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n sorter: true\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# sorter: true,\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"sort.update\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Draggable\n\n开启 tableDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。\n\n```yaml preview\n- brick: eo-table\n events:\n row.drag:\n - action: console.log\n properties:\n showCard: false\n rowKey: key\n tableDraggable: true\n configProps:\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n# show-card=\"false\"\n# row-key=\"key\"\n# table-draggable\n# id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.configProps = {\n# pagination: false,\n# columns: [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ],\n# dataSource: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.drag\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
7
|
+
},
|
|
8
8
|
"eo-next-table": {
|
|
9
9
|
"doc": "---\ntagName: eo-next-table\ndisplayName: WrappedEoNextTable\ndescription: 大型表格\ncategory: table\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-next-table\n\n> 大型表格\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------------------ | ------------------------ | ---- | ------------- | ------------------------------------------------------------------------------------------ |\n| rowKey | `string` | 否 | `\"key\"` | 指定表格行的 key |\n| columns | `Column[]` | 否 | - | 列定义 |\n| cell | `CellConfig` | 否 | - | 单元格统一配置，可配置 useBrick 自定义渲染所有单元格及表头 |\n| dataSource | `DataSource` | 否 | - | 数据源 |\n| frontSearch | `boolean` | 否 | - | 是否前端搜索 |\n| pagination | `PaginationType` | 否 | - | 分页配置 |\n| loading | `boolean` | 否 | - | 显示加载中状态 |\n| multiSort | `boolean` | 否 | - | 是否支持多列排序，前端搜索时需设置 column.sortPriority 优先级 |\n| sort | `Sort \\| Sort[]` | 否 | - | 排序信息 |\n| rowSelection | `RowSelectionType` | 否 | - | 表格行可选择配置 |\n| selectedRowKeys | `(string \\| number)[]` | 否 | - | 选中项的 key |\n| hiddenColumns | `(string \\| number)[]` | 否 | - | 隐藏的列（输入对应的 column.key） |\n| expandable | `ExpandableType` | 否 | - | 表格行展开配置 |\n| expandedRowKeys | `(string \\| number)[]` | 否 | - | 展开项的 key |\n| childrenColumnName | `string` | 否 | `\"children\"` | 树形结构的列名 |\n| rowDraggable | `boolean` | 否 | - | 表格行拖拽配置 |\n| rowClickable | `boolean` | 否 | - | 表格行可点击（激活鼠标手势） |\n| searchFields | `(string \\| string[])[]` | 否 | - | 进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索 |\n| size | `TableProps[\"size\"]` | 否 | `\"large\"` | 表格大小 |\n| showHeader | `boolean` | 否 | `true` | 是否显示表头 |\n| bordered | `boolean` | 否 | - | 是否显示边框 |\n| scrollConfig | `TableScroll` | 否 | `{ x: true }` | 滚动配置 |\n| optimizedColumns | `(string \\| number)[]` | 否 | - | 优化渲染的列（输入对应的 column.key） |\n| themeVariant | `\"default\" \\| \"elevo\"` | 否 | - | 主题变体 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| -------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------ |\n| page.change | `PageOrPageSizeChangeEventDetail` — 改变后的页码及每页条数 | page 或 pageSize 改变的回调 |\n| page.size.change | `PageOrPageSizeChangeEventDetail` — 改变后的页码及每页条数 | pageSize 变化的回调（已废弃，统一用 page.change 事件） |\n| sort.change | `Sort \\| Sort[] \\| undefined` — 当前排序的信息 | 排序变化的回调 |\n| row.click | `RecordType` — 被点击的行数据 | 行点击时的回调 |\n| row.select | `RowSelectEventDetail` — 改变后的 rowKey 及行数据 | 行选中项发生变化时的回调 |\n| row.select.v2 | `RecordType[]` — 改变后的行数据 | 行选中项发生变化时的回调（v2 版本） |\n| row.expand | `RowExpandEventDetail` — 当前行的展开情况及数据 | 点击展开图标时触发 |\n| expanded.rows.change | `(string \\| number)[]` — 所有展开行的 key | 展开的行变化时触发 |\n| row.drag | `RowDragEventDetail` — 重新排序的行数据、拖拽的行数据、放下位置的行数据 | 表格行拖拽结束发生的事件 |\n\n## Methods\n\n| 方法 | 参数 | 返回值 | 说明 |\n| ------ | -------------------------------------------------------------------- | ------ | -------- |\n| search | <ul><li>`params: { q: string }` - 搜索参数，q 为搜索关键词</li></ul> | `void` | 前端搜索 |\n\n## Examples\n\n### Basic\n\n展示大型表格的基本用法，配置 columns 和 dataSource，并支持分页与操作列。\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: false\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n - dataIndex: remarks\n key: remarks\n title: Long Column Long Column Long Column Long Column\n width: 200\n ellipsis: true\n - dataIndex: operator\n key: operator\n title: 操作\n width: 200\n useBrick:\n - brick: div\n properties:\n style:\n display: flex\n gap: 4px\n children:\n - brick: eo-button\n properties:\n type: link\n size: small\n icon:\n lib: antd\n icon: edit\n events:\n click:\n - action: message.info\n args:\n - <% DATA.rowData.name %>\n - brick: eo-button\n properties:\n type: link\n size: small\n danger: true\n icon:\n lib: antd\n icon: delete\n events:\n click:\n - action: message.error\n args:\n - <% JSON.stringify(DATA) %>\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n remarks: Long text Long text\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: false,\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# {\n# dataIndex: \"remarks\",\n# key: \"remarks\",\n# title: \"Long Column Long Column Long Column Long Column\",\n# width: 200,\n# ellipsis: true,\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# width: 200,\n# useBrick: [\n# {\n# brick: \"div\",\n# properties: {\n# style: {\n# display: \"flex\",\n# gap: \"4px\",\n# },\n# },\n# children: [\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.info\",\n# args: [\"<% DATA.rowData.name %>\"],\n# },\n# ],\n# },\n# },\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# danger: true,\n# icon: {\n# lib: \"antd\",\n# icon: \"delete\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.error\",\n# args: [\"<% JSON.stringify(DATA) %>\"],\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# remarks: \"Long text Long text\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n展示固定列、水平滚动及通过 useBrick 自定义单元格内容。\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: max-content\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n width: 100\n fixed: true\n headerBrick:\n useBrick:\n brick: span\n properties:\n style:\n color: red\n textContent: <% DATA.title %>\n useBrick:\n - brick: span\n properties:\n style:\n color: pink\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: column1\n title: column1\n - dataIndex: address\n key: column2\n title: column2\n - dataIndex: address\n key: column3\n title: column3\n - dataIndex: address\n key: column4\n title: column4\n - dataIndex: address\n key: column5\n title: column5\n - dataIndex: address\n key: column6\n title: column6\n - dataIndex: address\n key: column7\n title: column7\n - dataIndex: address\n key: column8\n title: column8\n - dataIndex: address\n key: column9\n title: column9\n - dataIndex: address\n key: column10\n title: column10\n - dataIndex: age\n key: age\n title: Age\n width: 100\n fixed: right\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: \"max-content\",\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# width: 100,\n# fixed: true,\n# headerBrick: {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"red\",\n# },\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# useBrick: [\n# {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"pink\",\n# },\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column1\",\n# title: \"column1\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column2\",\n# title: \"column2\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column3\",\n# title: \"column3\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column4\",\n# title: \"column4\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column5\",\n# title: \"column5\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column6\",\n# title: \"column6\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column7\",\n# title: \"column7\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column8\",\n# title: \"column8\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column9\",\n# title: \"column9\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column10\",\n# title: \"column10\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# width: 100,\n# fixed: \"right\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Front Search\n\n开启前端搜索，配合 search 方法与 searchFields 实现关键字过滤，支持多列排序。\n\n```yaml preview\n- brick: eo-search-bar\n children:\n - brick: eo-search\n slot: start\n properties:\n placeholder: Enter keyword\n events:\n search:\n target: \"#table\"\n method: search\n args:\n - q: <% EVENT.detail %>\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n sort.change:\n - action: console.log\n properties:\n id: table\n frontSearch: true\n searchFields:\n - address\n sort:\n columnKey: age\n order: descend\n multiSort: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n sortable: true\n sortPriority: 1\n - dataIndex: address\n key: address\n title: Address\n sortable: true\n sortPriority: 2\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n# <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"search\", (e) => {\n# const brick = document.querySelector(\"#table\");\n# brick.search({ q: \"<% EVENT.detail %>\" });\n# });\n# \n# const table = document.getElementById(\"table\");\n# table.searchFields = [\"address\"];\n# table.sort = {\n# columnKey: \"age\",\n# order: \"descend\",\n# };\n# table.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# table.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# sortable: true,\n# sortPriority: 1,\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# sortable: true,\n# sortPriority: 2,\n# },\n# ];\n# table.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# table.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"sort.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Row Selection\n\n配置 rowSelection 开启行选择功能，选中状态变化时触发 row.select 事件。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n properties:\n rowSelection: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n useBrick:\n - brick: eo-tag\n properties:\n color: |\n <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# useBrick: [\n# {\n# brick: \"eo-tag\",\n# properties: {\n# color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Row Click\n\n配置 rowClickable 开启行点击功能，点击行时触发 row.click 事件。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.click:\n - action: console.log\n properties:\n rowClickable: true\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-clickable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.click\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expandable\n\n配置 expandable 开启行展开功能，支持展开行内嵌套表格。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n expandable:\n rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n expandedRowBrick:\n useBrick:\n brick: eo-next-table\n properties:\n scrollConfig: false\n pagination: false\n bordered: true\n rowKey: title\n columns:\n - dataIndex: title\n key: title\n title: 标题\n - dataIndex: description\n key: description\n title: 描述\n - dataIndex: operator\n key: operator\n title: 操作\n useBrick:\n brick: eo-link\n properties:\n textContent: 操作\n dataSource:\n list: <% DATA.rowData.info %>\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n info:\n - title: 测试1\n description: 这是一串描述\n id: 1\n - title: 测试2\n description: 这是一串描述\n id: 2\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n info:\n - title: 测试3\n description: 这是一串描述\n id: 3\n - title: 测试4\n description: 这是一串描述\n id: 4\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Nanjing\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Wuhan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandable = {\n# rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n# expandedRowBrick: {\n# useBrick: {\n# brick: \"eo-next-table\",\n# properties: {\n# scrollConfig: false,\n# pagination: false,\n# bordered: true,\n# rowKey: \"title\",\n# columns: [\n# {\n# dataIndex: \"title\",\n# key: \"title\",\n# title: \"标题\",\n# },\n# {\n# dataIndex: \"description\",\n# key: \"description\",\n# title: \"描述\",\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# textContent: \"操作\",\n# },\n# },\n# },\n# ],\n# dataSource: {\n# list: \"<% DATA.rowData.info %>\",\n# },\n# },\n# },\n# },\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# info: [\n# {\n# title: \"测试1\",\n# description: \"这是一串描述\",\n# id: 1,\n# },\n# {\n# title: \"测试2\",\n# description: \"这是一串描述\",\n# id: 2,\n# },\n# ],\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# info: [\n# {\n# title: \"测试3\",\n# description: \"这是一串描述\",\n# id: 3,\n# },\n# {\n# title: \"测试4\",\n# description: \"这是一串描述\",\n# id: 4,\n# },\n# ],\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Nanjing\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Wuhan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Bordered\n\n展示带边框的表格样式。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Size\n\n展示不同尺寸（large、middle、small）的表格效果。\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n - brick: :forEach\n dataSource:\n - large\n - middle\n - small\n children:\n - brick: strong\n properties:\n textContent: \"<% `Size: ${ITEM}` %>\"\n - brick: eo-next-table\n properties:\n size: <% ITEM %>\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Draggable\n\n开启 rowDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.drag:\n - action: console.log\n properties:\n rowKey: name\n rowDraggable: true\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.drag\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n通过列配置的 colSpan、cellColSpanKey、cellRowSpanKey 实现单元格合并。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n pagination: false\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: mobile\n key: mobile\n title: phone\n colSpan: 2\n cellColSpanKey: mobileColSpan\n cellRowSpanKey: mobileRowSpan\n - dataIndex: landlines\n key: landlines\n colSpan: 0\n cellColSpanKey: landlinesColSpan\n cellRowSpanKey: landlinesRowSpan\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n mobile: 18900010222\n landlines: 0571-22098909\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n mobile: 18900010333\n mobileColSpan: 2\n landlinesColSpan: 0\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n mobile: 18900010444\n landlines: 0571-22098707\n landlinesRowSpan: 2\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n mobile: 18900010555\n landlines: 0571-22098707\n landlinesRowSpan: 0\n mobileRowSpan: 2\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n mobile: 18900010555\n landlines: 0571-22098606\n mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"mobile\",\n# key: \"mobile\",\n# title: \"phone\",\n# colSpan: 2,\n# cellColSpanKey: \"mobileColSpan\",\n# cellRowSpanKey: \"mobileRowSpan\",\n# },\n# {\n# dataIndex: \"landlines\",\n# key: \"landlines\",\n# colSpan: 0,\n# cellColSpanKey: \"landlinesColSpan\",\n# cellRowSpanKey: \"landlinesRowSpan\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# mobile: 18900010222,\n# landlines: \"0571-22098909\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# mobile: 18900010333,\n# mobileColSpan: 2,\n# landlinesColSpan: 0,\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# mobile: 18900010444,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 2,\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# mobile: 18900010555,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 0,\n# mobileRowSpan: 2,\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# mobile: 18900010555,\n# landlines: \"0571-22098606\",\n# mobileRowSpan: 0,\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n pagination: false\n childrenColumnName: student\n expandable:\n defaultExpandAllRows: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 28\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 35\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 33\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.expandable = {\n# defaultExpandAllRows: true,\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Dynamic Columns\n\n通过 cell 配置统一自定义单元格渲染，结合动态列实现灵活的表格展示。\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n cell:\n useBrick:\n - if: <% DATA.columnKey !== '01-13' %>\n brick: em\n properties:\n textContent: <% DATA.cellData %>\n - if: <% DATA.columnKey === '01-13' %>\n brick: del\n properties:\n textContent: <% DATA.cellData %>\n header:\n useBrick:\n brick: em\n properties:\n textContent: <% DATA.title %>\n columns: <% CTX.dates %>\n dataSource:\n list:\n - \"01-11\": \"abc\"\n \"01-12\": \"def\"\n \"01-13\": \"ghi\"\n \"01-14\": \"jkl\"\n - \"01-11\": \"123\"\n \"01-12\": \"345\"\n \"01-13\": \"789\"\n \"01-14\": \"-\"\ncontext:\n - name: dates\n value: |\n <%\n new Array(4).fill(null).map(\n (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n ).map((key) => ({\n dataIndex: key,\n key,\n title: key,\n }))\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cell = {\n# useBrick: [\n# {\n# if: \"<% DATA.columnKey !== '01-13' %>\",\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# {\n# if: \"<% DATA.columnKey === '01-13' %>\",\n# brick: \"del\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# header: {\n# useBrick: {\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# };\n# brick_1.columns = \"<% CTX.dates %>\";\n# brick_1.dataSource = {\n# list: [\n# {\n# \"01-11\": \"abc\",\n# \"01-12\": \"def\",\n# \"01-13\": \"ghi\",\n# \"01-14\": \"jkl\",\n# },\n# {\n# \"01-11\": \"123\",\n# \"01-12\": \"345\",\n# \"01-13\": \"789\",\n# \"01-14\": \"-\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Cell Status\n\n通过列的 cellStatus 配置，根据数据值设置单元格左边框颜色来表示状态。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n columns:\n - dataIndex: name\n key: name\n title: Name\n cellStatus:\n dataIndex: age\n mapping:\n - value: 18\n leftBorderColor: green\n - value: 20\n leftBorderColor: blue\n - value: 28\n leftBorderColor: red\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# cellStatus: {\n# dataIndex: \"age\",\n# mapping: [\n# {\n# value: 18,\n# leftBorderColor: \"green\",\n# },\n# {\n# value: 20,\n# leftBorderColor: \"blue\",\n# },\n# {\n# value: 28,\n# leftBorderColor: \"red\",\n# },\n# ],\n# },\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Hidden Columns\n\n通过 hiddenColumns 隐藏指定列，传入对应的 column.key 即可。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n hiddenColumns:\n - age\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.hiddenColumns = [\"age\"];\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Selected Row Keys\n\n通过 selectedRowKeys 设置默认选中的行。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n row.select.v2:\n - action: console.log\n properties:\n rowSelection: true\n selectedRowKeys:\n - 0\n - 2\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.selectedRowKeys = [0, 2];\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"row.select.v2\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expanded Row Keys\n\n通过 expandedRowKeys 设置默认展开的行。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n expandedRowKeys:\n - 0\n expandable:\n expandedRowBrick:\n useBrick:\n brick: span\n properties:\n textContent: 展开内容\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandedRowKeys = [0];\n# brick_1.expandable = {\n# expandedRowBrick: {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# textContent: \"展开内容\",\n# },\n# },\n# },\n# };\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Loading\n\n显示加载中状态。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n loading: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table loading id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Show Header\n\n通过 showHeader 控制是否显示表头。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n showHeader: false\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Optimized Columns\n\n通过 optimizedColumns 指定需要优化渲染的列。\n\n```yaml preview\n- brick: eo-next-table\n properties:\n optimizedColumns:\n - name\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.optimizedColumns = [\"name\"];\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Theme Variant Elevo\n\n使用 themeVariant 为表格设置 elevo 主题样式。\n\n```yaml preview\nbrick: ai-portal.home-container\nproperties:\n style:\n padding: 2em\n backgroundColor: \"#d8d8d8\"\nchildren:\n - brick: eo-next-table\n properties:\n themeVariant: elevo\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-next-table theme-variant=\"elevo\" id=\"brick-1\"></eo-next-table>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n"
|
|
10
10
|
},
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
"eo-workbench-layout-v2": {
|
|
15
15
|
"doc": "---\ntagName: eo-workbench-layout-v2\ndisplayName: WrappedEoWorkbenchLayoutV2\ndescription: 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）\ncategory: layout\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-workbench-layout-v2\n\n> 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| -------------------------- | ------------------------------------ | ---- | ------ | ------------------------------------------------------------ |\n| cardTitle | `string` | 否 | - | 编辑模式下左侧卡片列表面板的标题 |\n| isEdit | `boolean` | 否 | - | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |\n| layouts | `ExtraLayout[]` | 否 | - | 当前布局配置，每项对应一个卡片的位置与大小及样式信息 |\n| toolbarBricks | `{ useBrick: UseSingleBrickConf[] }` | 否 | - | 编辑模式下工具栏区域的自定义构件 |\n| componentList | `WorkbenchComponent[]` | 否 | - | 组件列表，每项包含 key、title、useBrick 和 position 信息 |\n| customDefaultCardConfigMap | `Record<string, CardStyleConfig>` | 否 | - | 自定义卡片默认配置，用于覆盖默认卡片样式配置 |\n| showSettingButton | `boolean` | 否 | - | 是否显示设置按钮，用于触发页面样式和布局设置 |\n| gap | `number` | 否 | - | 卡片之间的间距（px） |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------------ | --------------------------------------------------------------------------------------------------- | ------------------------------ |\n| change | `ExtraLayout[]` — 当前布局配置数组 | 布局发生变化时触发 |\n| save | `ExtraLayout[]` — 保存时的布局配置数组 | 点击保存按钮时触发 |\n| cancel | `void` | 点击取消按钮时触发 |\n| setting | `void` | 点击设置按钮时触发 |\n| action.click | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 更多操作菜单中的操作点击时触发 |\n\n## Methods\n\n| 方法 | 参数 | 返回值 | 说明 |\n| ---------- | ----------------------------- | ------ | ------------ |\n| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |\n\n## Examples\n\n### Basic\n\n展示工作台布局 V2 的基本用法，通过 layouts 和 componentList 配置卡片布局。\n\n```yaml preview\n- brick: eo-workbench-layout-v2\n properties:\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n type: hello\n cardWidth: 2\n - i: world\n x: 0\n y: 1\n w: 2\n h: 1\n type: world\n cardWidth: 2\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n type: small\n cardWidth: 1\n componentList:\n - title: Hello 卡片\n key: hello\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n background: \"#fff\"\n height: 100%\n textContent: Hello World\n - title: World 卡片\n key: world\n position:\n i: world\n x: 0\n y: 2\n w: 2\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n background: \"#fff\"\n height: 100%\n textContent: World Content\n - title: Small 卡片\n key: small\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n background: \"#fff\"\n height: 100%\n textContent: Small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout-v2 id=\"brick-1\"></eo-workbench-layout-v2>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# type: \"hello\",\n# cardWidth: 2,\n# },\n# {\n# i: \"world\",\n# x: 0,\n# y: 1,\n# w: 2,\n# h: 1,\n# type: \"world\",\n# cardWidth: 2,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# type: \"small\",\n# cardWidth: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"Hello 卡片\",\n# key: \"hello\",\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# background: \"#fff\",\n# height: \"100%\",\n# },\n# textContent: \"Hello World\",\n# },\n# },\n# },\n# {\n# title: \"World 卡片\",\n# key: \"world\",\n# position: {\n# i: \"world\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# background: \"#fff\",\n# height: \"100%\",\n# },\n# textContent: \"World Content\",\n# },\n# },\n# },\n# {\n# title: \"Small 卡片\",\n# key: \"small\",\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# background: \"#fff\",\n# height: \"100%\",\n# },\n# textContent: \"Small\",\n# },\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Edit Mode with Settings\n\n开启编辑模式，显示设置按钮，并监听 save、cancel、setting 事件。\n\n```yaml preview\n- brick: eo-workbench-layout-v2\n events:\n save:\n - action: console.log\n cancel:\n - action: console.log\n change:\n - action: console.log\n setting:\n - action: console.log\n properties:\n isEdit: true\n showSettingButton: true\n gap: 16\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n type: hello\n cardWidth: 2\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n type: small\n cardWidth: 1\n componentList:\n - title: Hello 卡片\n key: hello\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n height: 100%\n textContent: Hello World\n - title: Small 卡片\n key: small\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n height: 100%\n textContent: Small\n - title: Extra 卡片\n key: extra\n position:\n i: extra\n x: 0\n y: 2\n w: 2\n h: 1\n useBrick:\n brick: div\n properties:\n style:\n padding: 16px\n height: 100%\n textContent: Extra Content\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout-v2\n# is-edit\n# show-setting-button\n# gap=\"16\"\n# id=\"brick-1\"\n# ></eo-workbench-layout-v2>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# type: \"hello\",\n# cardWidth: 2,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# type: \"small\",\n# cardWidth: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"Hello 卡片\",\n# key: \"hello\",\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# height: \"100%\",\n# },\n# textContent: \"Hello World\",\n# },\n# },\n# },\n# {\n# title: \"Small 卡片\",\n# key: \"small\",\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# height: \"100%\",\n# },\n# textContent: \"Small\",\n# },\n# },\n# },\n# {\n# title: \"Extra 卡片\",\n# key: \"extra\",\n# position: {\n# i: \"extra\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# padding: \"16px\",\n# height: \"100%\",\n# },\n# textContent: \"Extra Content\",\n# },\n# },\n# },\n# ];\n# brick_1.addEventListener(\"save\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"cancel\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"setting\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
16
16
|
},
|
|
17
|
-
"eo-tree": {
|
|
18
|
-
"doc": "---\ntagName: eo-tree\ndisplayName: WrappedEoTree\ndescription: 树形构件\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-tree\n\n> 树形构件\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ---------------- | ---------------------------------- | ---- | ------ | ------------------------------------------------------------------------------- |\n| dataSource | `TreeNode[]` | 否 | - | 树形数据源 |\n| checkable | `boolean` | 否 | - | 是否显示 Checkbox，开启后可勾选节点 |\n| selectable | `boolean` | 否 | - | 是否可选中节点 |\n| defaultExpandAll | `boolean` | 否 | - | 是否默认展开所有树节点 |\n| showLine | `boolean` | 否 | - | 是否显示连接线 |\n| expandedKeys | `TreeNodeKey[]` | 否 | - | 受控展开的节点 key 集合 |\n| checkedKeys | `TreeNodeKey[]` | 否 | - | 受控勾选的节点 key 集合（仅在 checkable 为 true 时有效） |\n| nodeDraggable | `boolean \\| { icon?: false }` | 否 | - | 是否允许拖拽节点，也可传入对象配置是否显示拖拽图标 |\n| switcherIcon | `\"auto\" \\| \"chevron\" \\| false` | 否 | - | 自定义展开/折叠图标，可选 auto（默认箭头）、chevron（下箭头）或 false（不显示） |\n| allowDrop | `(info: AllowDropInfo) => boolean` | 否 | - | 是否允许拖放到指定位置的判断函数 |\n| titleSuffixBrick | `{ useBrick: UseBrickConf }` | 否 | - | 节点标题后缀插槽，通过 useBrick 在每个节点标题后渲染自定义构件 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |\n| check | `TreeNodeKey[]` — 所有勾选节点的 key 数组 | 勾选状态变化时触发 |\n| check.detail | `CheckDetail` — { checkedKeys: 已勾选的节点 key 数组, halfCheckedKeys: 半选中的节点 key 数组 } | 勾选状态变化时触发，包含半选中状态 |\n| expand | `TreeNodeKey[]` — 当前展开的节点 key 数组 | 展开/折叠节点时触发 |\n| node.drop | `DropDetail` — { dragNode: 被拖拽的节点, dropNode: 放置目标节点, dropPosition: 放置位置（0 表示内部，-1 表示上方，1 表示下方） } | 节点拖拽放置时触发 |\n\n## Examples\n\n### Basic\n\n展示树形构件的基本用法，默认展开所有节点。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Checkable\n\n开启 checkable 显示勾选框，并配置 showLine 显示连接线，勾选变化时触发 check 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n checkable: true\n selectable: false\n showLine: true\n switcherIcon: chevron\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n check:\n action: console.log\n check.detail:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.switcherIcon = \"chevron\";\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check.detail\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Title Suffix Brick\n\n通过 titleSuffixBrick 在每个节点标题后渲染自定义构件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n titleSuffixBrick:\n useBrick:\n brick: eo-link\n properties:\n icon:\n lib: antd\n icon: edit\n theme: outlined\n style:\n margin-left: 5px\n font-size: 12px\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.titleSuffixBrick = {\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# theme: \"outlined\",\n# },\n# style: {\n# \"margin-left\": \"5px\",\n# \"font-size\": \"12px\",\n# },\n# },\n# },\n# };\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Draggable\n\n开启 nodeDraggable 允许拖拽节点，拖拽放置后触发 node.drop 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n nodeDraggable: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n node.drop:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.nodeDraggable = true;\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"node.drop\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Controlled Expand and Check\n\n通过 expandedKeys 和 checkedKeys 受控管理展开与勾选状态，并监听 expand 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n checkable: true\n expandedKeys:\n - 0-0\n checkedKeys:\n - 0-0-0-0\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n expand:\n action: console.log\n check:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree checkable id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandedKeys = [\"0-0\"];\n# brick_1.checkedKeys = [\"0-0-0-0\"];\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
19
|
-
},
|
|
20
17
|
"eo-tree-select": {
|
|
21
18
|
"doc": "---\ntagName: eo-tree-select\ndisplayName: WrappedEoTreeSelect\ndescription: 树选择器，支持从树形数据中单选或多选节点\ncategory: form-input-basic\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-tree-select\n\n> 树选择器，支持从树形数据中单选或多选节点\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------------------- | --------------------------------------- | ---- | -------------- | ------------------------------------------------------------- |\n| name | `string` | 否 | - | 表单字段名 |\n| label | `string` | 否 | - | 表单字段标签 |\n| required | `boolean` | 否 | - | 是否为必填项 |\n| treeData | `AntdTreeSelectProps[\"treeData\"]` | 否 | - | 树形数据源 |\n| treeDefaultExpandAll | `boolean` | 否 | - | 是否默认展开所有树节点 |\n| treeExpandedKeys | `string[]` | 否 | - | 受控展开的树节点 key 集合 |\n| fieldNames | `AntdTreeSelectProps[\"fieldNames\"]` | 否 | - | 自定义字段名，指定 label、value、children 对应的字段 |\n| value | `AntdTreeSelectProps[\"value\"]` | 否 | - | 当前选中的值 |\n| placeholder | `string` | 否 | - | 输入框占位文本 |\n| multiple | `boolean` | 否 | - | 是否支持多选 |\n| disabled | `boolean` | 否 | - | 是否禁用 |\n| checkable | `boolean` | 否 | - | 是否支持勾选树节点（开启后自动开启 multiple 模式） |\n| allowClear | `boolean` | 否 | `true` | 是否支持清除 |\n| loading | `boolean` | 否 | `false` | 是否显示加载中状态 |\n| filterTreeNode | `AntdTreeSelectProps[\"filterTreeNode\"]` | 否 | - | 自定义树节点过滤函数 |\n| showSearch | `boolean` | 否 | `true` | 是否支持搜索，开启后可通过输入关键字过滤树节点 |\n| suffixIcon | `GeneralIconProps` | 否 | - | 自定义下拉箭头图标 |\n| popupPlacement | `AntdTreeSelectProps[\"placement\"]` | 否 | `\"bottomLeft\"` | 浮层预设位置，可选 bottomLeft、bottomRight、topLeft、topRight |\n| size | `AntdTreeSelectProps[\"size\"]` | 否 | - | 输入框大小，可选 large、middle、small |\n| maxTagCount | `number \\| \"responsive\"` | 否 | - | 多选模式下最多显示的 tag 数量，设为 responsive 时会自适应宽度 |\n| dropdownStyle | `CSSProperties` | 否 | - | 下拉框的样式 |\n| popupMatchSelectWidth | `boolean` | 否 | `true` | 下拉菜单的宽度是否与选择框相同 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------ | ------------------------------------------------------------------- | --------------------- |\n| change | `{ value: AntdTreeSelectProps[\"value\"] }` — { value: 选择的值 } | 选中值变化时触发 |\n| search | `string` — 搜索关键词 | 搜索框值变化时触发 |\n| select | `{ value: AntdTreeSelectProps[\"value\"] }` — { value: 选中的节点值 } | 选中某一树节点时触发 |\n| expand | `{ keys: React.Key[] }` — { keys: 展开的节点 key 数组 } | 树节点展开/收缩时触发 |\n\n## Examples\n\n### Basic\n\n展示树选择器的基本用法，通过 treeData 提供树形数据源。\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-tree-select\n properties:\n treeData:\n - title: Node1\n value: 0\n key: 0\n children:\n - title: Node1-1\n value: 0-1\n - title: Node1-2\n value: 0-2\n - title: Node1-3\n value: 0-3\n - title: Node2\n value: 1\n key: 1\n children:\n - title: Node2-1\n value: 1-1\n - title: Node2-2\n value: 1-2\n - title: Node2-3\n value: 1-3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select id=\"brick-1\"></eo-tree-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.treeData = [\n# {\n# title: \"Node1\",\n# value: 0,\n# key: 0,\n# children: [\n# {\n# title: \"Node1-1\",\n# value: \"0-1\",\n# },\n# {\n# title: \"Node1-2\",\n# value: \"0-2\",\n# },\n# {\n# title: \"Node1-3\",\n# value: \"0-3\",\n# },\n# ],\n# },\n# {\n# title: \"Node2\",\n# value: 1,\n# key: 1,\n# children: [\n# {\n# title: \"Node2-1\",\n# value: \"1-1\",\n# },\n# {\n# title: \"Node2-2\",\n# value: \"1-2\",\n# },\n# {\n# title: \"Node2-3\",\n# value: \"1-3\",\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用树选择器，配置 name、label 和 required 实现表单集成与校验。\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-form\n events:\n validate.success:\n - action: console.log\n validate.error:\n - action: console.log\n children:\n - brick: eo-tree-select\n properties:\n label: tree\n name: tree\n required: true\n treeData:\n - title: \"Node1\"\n value: \"Node1\"\n key: \"0-0\"\n children:\n - title: \"Child Node1-1\"\n value: \"Child Node1-1\"\n key: \"0-0-0\"\n - title: \"Child Node1-2\"\n value: \"Child Node1-2\"\n key: \"0-0-1\"\n - title: \"Node2\"\n value: \"0-1\"\n key: \"0-1\"\n children:\n - title: \"Child Node2-1\"\n value: \"Child Node2-1\"\n key: \"0-1-0\"\n - title: \"Child Node2-2\"\n value: \"Child Node2-2\"\n key: \"0-1-1\"\n children:\n - title: Child Node2-2-1\n value: Child Node2-2-1\n key: \"0-1-1-0\"\n multiple: true\n checkable: true\n placeholder: 请选择树节点\n events:\n change:\n - action: console.log\n select:\n - action: console.log\n expand:\n - action: console.log\n search:\n - action: console.log\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-tree-select\n# label=\"tree\"\n# name=\"tree\"\n# required\n# multiple\n# checkable\n# placeholder=\"请选择树节点\"\n# id=\"brick-2\"\n# ></eo-tree-select>\n# <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"validate.error\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.treeData = [\n# {\n# title: \"Node1\",\n# value: \"Node1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"Child Node1-1\",\n# value: \"Child Node1-1\",\n# key: \"0-0-0\",\n# },\n# {\n# title: \"Child Node1-2\",\n# value: \"Child Node1-2\",\n# key: \"0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"Node2\",\n# value: \"0-1\",\n# key: \"0-1\",\n# children: [\n# {\n# title: \"Child Node2-1\",\n# value: \"Child Node2-1\",\n# key: \"0-1-0\",\n# },\n# {\n# title: \"Child Node2-2\",\n# value: \"Child Node2-2\",\n# key: \"0-1-1\",\n# children: [\n# {\n# title: \"Child Node2-2-1\",\n# value: \"Child Node2-2-1\",\n# key: \"0-1-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_2.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"select\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"search\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Multiple Selection with Max Tag Count\n\n开启多选模式并设置 maxTagCount 限制显示的 tag 数量。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-tree-select\n properties:\n multiple: true\n maxTagCount: 2\n treeDefaultExpandAll: true\n placeholder: 可多选，最多显示2个标签\n treeData:\n - title: Node1\n value: \"0-0\"\n key: \"0-0\"\n children:\n - title: Node1-1\n value: \"0-0-1\"\n key: \"0-0-1\"\n - title: Node1-2\n value: \"0-0-2\"\n key: \"0-0-2\"\n - title: Node2\n value: \"0-1\"\n key: \"0-1\"\n children:\n - title: Node2-1\n value: \"0-1-1\"\n key: \"0-1-1\"\n - title: Node2-2\n value: \"0-1-2\"\n key: \"0-1-2\"\n events:\n change:\n - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select\n# multiple\n# tree-default-expand-all\n# placeholder=\"可多选，最多显示2个标签\"\n# id=\"brick-1\"\n# ></eo-tree-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.maxTagCount = 2;\n# brick_1.treeData = [\n# {\n# title: \"Node1\",\n# value: \"0-0\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"Node1-1\",\n# value: \"0-0-1\",\n# key: \"0-0-1\",\n# },\n# {\n# title: \"Node1-2\",\n# value: \"0-0-2\",\n# key: \"0-0-2\",\n# },\n# ],\n# },\n# {\n# title: \"Node2\",\n# value: \"0-1\",\n# key: \"0-1\",\n# children: [\n# {\n# title: \"Node2-1\",\n# value: \"0-1-1\",\n# key: \"0-1-1\",\n# },\n# {\n# title: \"Node2-2\",\n# value: \"0-1-2\",\n# key: \"0-1-2\",\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Custom Field Names and Disabled\n\n使用 fieldNames 自定义数据源字段，并展示禁用状态。\n\n```yaml preview minHeight=\"400px\"\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n gap: 16px\n children:\n - brick: eo-tree-select\n properties:\n fieldNames:\n label: name\n value: id\n children: sub\n treeDefaultExpandAll: true\n placeholder: 自定义字段名\n treeData:\n - name: 技术\n id: tech\n sub:\n - name: 前端\n id: frontend\n - name: 后端\n id: backend\n - brick: eo-tree-select\n properties:\n disabled: true\n value: \"0-0\"\n placeholder: 禁用状态\n treeData:\n - title: Node1\n value: \"0-0\"\n key: \"0-0\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n# <eo-tree-select\n# tree-default-expand-all\n# placeholder=\"自定义字段名\"\n# id=\"brick-1\"\n# ></eo-tree-select>\n# <eo-tree-select disabled placeholder=\"禁用状态\" id=\"brick-2\"></eo-tree-select>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.fieldNames = {\n# label: \"name\",\n# value: \"id\",\n# children: \"sub\",\n# };\n# brick_1.treeData = [\n# {\n# name: \"技术\",\n# id: \"tech\",\n# sub: [\n# {\n# name: \"前端\",\n# id: \"frontend\",\n# },\n# {\n# name: \"后端\",\n# id: \"backend\",\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.value = \"0-0\";\n# brick_2.treeData = [\n# {\n# title: \"Node1\",\n# value: \"0-0\",\n# key: \"0-0\",\n# },\n# ];\n# </script>\n# \n```\n"
|
|
22
19
|
},
|
|
23
20
|
"eo-text-tooltip": {
|
|
24
21
|
"doc": "---\ntagName: eo-text-tooltip\ndisplayName: WrappedEoTextTooltip\ndescription: 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-text-tooltip\n\n> 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------- | -------- | ---- | ------ | ----------------------------------------------------- |\n| label | `string` | 否 | - | 显示的文本内容，超出时以省略号截断 |\n| lineClamp | `number` | 否 | `1` | 省略的行数，超过该行数后显示省略号，设为 0 表示不省略 |\n\n## Examples\n\n### Basic\n\n展示文本 Tooltip 的基本用法，超出宽度时鼠标悬浮显示完整内容。\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n flex-direction: column\n gap: 16px\n children:\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\n lineClamp: 0\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 单行不超出不显示tips\n lineClamp: 1\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\n lineClamp: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\"\n# line-clamp=\"0\"\n# ></eo-text-tooltip>\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"单行不超出不显示tips\"\n# line-clamp=\"1\"\n# ></eo-text-tooltip>\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\"\n# line-clamp=\"1\"\n# ></eo-text-tooltip>\n# </div>\n# \n```\n\n### Multi-line Clamp\n\n通过设置 lineClamp 控制最多显示的行数，超出时显示省略号并悬浮展示完整内容。\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n flex-direction: column\n gap: 16px\n children:\n - brick: eo-text-tooltip\n properties:\n style:\n width: 200px\n label: 多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略\n lineClamp: 2\n - brick: eo-text-tooltip\n properties:\n style:\n width: 200px\n label: 三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略\n lineClamp: 3\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n# <eo-text-tooltip\n# style=\"width: 200px\"\n# label=\"多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略\"\n# line-clamp=\"2\"\n# ></eo-text-tooltip>\n# <eo-text-tooltip\n# style=\"width: 200px\"\n# label=\"三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略\"\n# line-clamp=\"3\"\n# ></eo-text-tooltip>\n# </div>\n# \n```\n"
|
|
25
22
|
},
|
|
23
|
+
"eo-tree": {
|
|
24
|
+
"doc": "---\ntagName: eo-tree\ndisplayName: WrappedEoTree\ndescription: 树形构件\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-tree\n\n> 树形构件\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ---------------- | ---------------------------------- | ---- | ------ | ------------------------------------------------------------------------------- |\n| dataSource | `TreeNode[]` | 否 | - | 树形数据源 |\n| checkable | `boolean` | 否 | - | 是否显示 Checkbox，开启后可勾选节点 |\n| selectable | `boolean` | 否 | - | 是否可选中节点 |\n| defaultExpandAll | `boolean` | 否 | - | 是否默认展开所有树节点 |\n| showLine | `boolean` | 否 | - | 是否显示连接线 |\n| expandedKeys | `TreeNodeKey[]` | 否 | - | 受控展开的节点 key 集合 |\n| checkedKeys | `TreeNodeKey[]` | 否 | - | 受控勾选的节点 key 集合（仅在 checkable 为 true 时有效） |\n| nodeDraggable | `boolean \\| { icon?: false }` | 否 | - | 是否允许拖拽节点，也可传入对象配置是否显示拖拽图标 |\n| switcherIcon | `\"auto\" \\| \"chevron\" \\| false` | 否 | - | 自定义展开/折叠图标，可选 auto（默认箭头）、chevron（下箭头）或 false（不显示） |\n| allowDrop | `(info: AllowDropInfo) => boolean` | 否 | - | 是否允许拖放到指定位置的判断函数 |\n| titleSuffixBrick | `{ useBrick: UseBrickConf }` | 否 | - | 节点标题后缀插槽，通过 useBrick 在每个节点标题后渲染自定义构件 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |\n| check | `TreeNodeKey[]` — 所有勾选节点的 key 数组 | 勾选状态变化时触发 |\n| check.detail | `CheckDetail` — { checkedKeys: 已勾选的节点 key 数组, halfCheckedKeys: 半选中的节点 key 数组 } | 勾选状态变化时触发，包含半选中状态 |\n| expand | `TreeNodeKey[]` — 当前展开的节点 key 数组 | 展开/折叠节点时触发 |\n| node.drop | `DropDetail` — { dragNode: 被拖拽的节点, dropNode: 放置目标节点, dropPosition: 放置位置（0 表示内部，-1 表示上方，1 表示下方） } | 节点拖拽放置时触发 |\n\n## Examples\n\n### Basic\n\n展示树形构件的基本用法，默认展开所有节点。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Checkable\n\n开启 checkable 显示勾选框，并配置 showLine 显示连接线，勾选变化时触发 check 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n checkable: true\n selectable: false\n showLine: true\n switcherIcon: chevron\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n check:\n action: console.log\n check.detail:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.switcherIcon = \"chevron\";\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check.detail\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Title Suffix Brick\n\n通过 titleSuffixBrick 在每个节点标题后渲染自定义构件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n titleSuffixBrick:\n useBrick:\n brick: eo-link\n properties:\n icon:\n lib: antd\n icon: edit\n theme: outlined\n style:\n margin-left: 5px\n font-size: 12px\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.titleSuffixBrick = {\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# theme: \"outlined\",\n# },\n# style: {\n# \"margin-left\": \"5px\",\n# \"font-size\": \"12px\",\n# },\n# },\n# },\n# };\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Draggable\n\n开启 nodeDraggable 允许拖拽节点，拖拽放置后触发 node.drop 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n nodeDraggable: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n node.drop:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.nodeDraggable = true;\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"node.drop\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Controlled Expand and Check\n\n通过 expandedKeys 和 checkedKeys 受控管理展开与勾选状态，并监听 expand 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n checkable: true\n expandedKeys:\n - 0-0\n checkedKeys:\n - 0-0-0-0\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n expand:\n action: console.log\n check:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree checkable id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandedKeys = [\"0-0\"];\n# brick_1.checkedKeys = [\"0-0-0-0\"];\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
25
|
+
},
|
|
26
26
|
"advanced.pdf-viewer": {
|
|
27
27
|
"doc": "---\ntagName: advanced.pdf-viewer\ndisplayName: WrappedAdvancedPdfViewer\ndescription: PDF 文件预览器，支持分页跳转和关键字高亮搜索\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# advanced.pdf-viewer\n\n> PDF 文件预览器，支持分页跳转和关键字高亮搜索\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ----------- | --------------- | ---- | ------ | ---------------------------------------------------------------- |\n| url | `string` | 是 | - | PDF 文件的访问地址 |\n| page | `number` | 否 | - | 初始显示的页码（从 1 开始），内部会自动转换为从 0 开始的索引 |\n| search | `string` | 否 | - | 文档加载后自动高亮的搜索关键字 |\n| viewerStyle | `CSSProperties` | 否 | - | 查看器容器的内联样式，常用于设置高度（如 `{ height: \"500px\" }`） |\n\n## Examples\n\n### Basic\n\n展示 PDF 文件预览的基本用法，通过 url 指定 PDF 地址并设置查看器高度。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n viewerStyle:\n height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n# url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n# id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.viewerStyle = {\n# height: \"500px\",\n# };\n# </script>\n# \n```\n\n### Jump to Page\n\n通过 page 属性指定 PDF 打开后跳转到的初始页码。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n page: 3\n viewerStyle:\n height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n# url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n# page=\"3\"\n# id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.viewerStyle = {\n# height: \"500px\",\n# };\n# </script>\n# \n```\n\n### Keyword Search\n\n通过 search 属性在文档加载后自动高亮指定关键字。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n search: JavaScript\n viewerStyle:\n height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n# url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n# search=\"JavaScript\"\n# id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.viewerStyle = {\n# height: \"500px\",\n# };\n# </script>\n# \n```\n"
|
|
28
28
|
},
|