diff --git a/src/tree/demos/enUS/index.demo-entry.md b/src/tree/demos/enUS/index.demo-entry.md index f181bf42a79..0c0187fd649 100644 --- a/src/tree/demos/enUS/index.demo-entry.md +++ b/src/tree/demos/enUS/index.demo-entry.md @@ -55,6 +55,7 @@ override-click-behavior.vue | expand-on-dragenter | `boolean` | `true` | Whether to expand nodes after dragenter. | | | expand-on-click | `boolean` | `false` | Whether to expand or collapse nodes after click. | 2.29.1 | | expanded-keys | `Array` | `undefined` | If set, expanded status will work in controlled manner. | | +| ellipsis | `boolean` | `false` | Whether to ellipsis the text that exceeds the width. | | | filter | `(pattern: string, node: TreeOption) => boolean` | A simple string based filter. | The function that filter tree nodes based on pattern. | | | get-children | `(option: any) => unknown` | `undefined` | Get children of the option. | 2.34.3 | | indeterminate-keys | `Array` | `undefined` | Indeterminate keys of the tree. | | diff --git a/src/tree/demos/zhCN/ellipsis.demo.vue b/src/tree/demos/zhCN/ellipsis.demo.vue new file mode 100644 index 00000000000..32752c72eb6 --- /dev/null +++ b/src/tree/demos/zhCN/ellipsis.demo.vue @@ -0,0 +1,55 @@ + +# 省略 + +有时候节点的文本会很长,可以使用 `ellipsis` 来省略文本。 + + + + + diff --git a/src/tree/demos/zhCN/index.demo-entry.md b/src/tree/demos/zhCN/index.demo-entry.md index b0cb713e789..fd7708041c1 100644 --- a/src/tree/demos/zhCN/index.demo-entry.md +++ b/src/tree/demos/zhCN/index.demo-entry.md @@ -24,6 +24,7 @@ node-props.vue show-line.vue checkbox-placement.vue override-click-behavior.vue +ellipsis.vue check-strategy-debug.vue change-debug.vue scrollbar-debug.vue @@ -58,6 +59,7 @@ expand-debug.vue | default-expanded-keys | `Array` | `[]` | 默认展开项 | | | default-selected-keys | `Array` | `[]` | 默认选中的节点 | | | draggable | `boolean` | `false` | 是否可拖拽 | | +| ellipsis | `boolean` | `false` | 是否省略超出宽度的文本 | | | expand-on-dragenter | `boolean` | `true` | 是否在拖入后展开节点 | | | expand-on-click | `boolean` | `false` | 是否在点击节点后展开或收缩节点 | 2.29.1 | | expanded-keys | `Array` | `undefined` | 如果设定则展开受控 | | diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx index 8ee3cafb78f..d9b687549a4 100644 --- a/src/tree/src/Tree.tsx +++ b/src/tree/src/Tree.tsx @@ -86,9 +86,9 @@ export function createTreeMateOptions( ): TreeMateOptions { const settledGetChildren: GetChildren = getChildren - || ((node: T) => { - return (node as any)[childrenField] - }) + || ((node: T) => { + return (node as any)[childrenField] + }) return { getIsGroup() { return false @@ -274,6 +274,10 @@ export const treeProps = { type: Boolean, default: true }, + ellipsis: { + type: Boolean, + default: false + }, checkboxPlacement: { type: String as PropType<'left' | 'right'>, default: 'left' @@ -1748,6 +1752,7 @@ export default defineComponent({ blockLine, draggable, disabled, + ellipsis, internalFocusable, checkable, handleKeydown, @@ -1762,7 +1767,8 @@ export default defineComponent({ rtlEnabled && `${mergedClsPrefix}-tree--rtl`, checkable && `${mergedClsPrefix}-tree--checkable`, (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`, - blockLine && `${mergedClsPrefix}-tree--block-line` + blockLine && `${mergedClsPrefix}-tree--block-line`, + ellipsis && `${mergedClsPrefix}-tree--ellipsis` ] const createNode = (tmNode: TmNode | MotionData): VNode => { return '__motion' in tmNode ? ( diff --git a/src/tree/src/styles/index.cssr.ts b/src/tree/src/styles/index.cssr.ts index 91e92560d66..6115deeedec 100644 --- a/src/tree/src/styles/index.cssr.ts +++ b/src/tree/src/styles/index.cssr.ts @@ -128,6 +128,19 @@ export default cB('tree', ` `) ]) ]), + cM('ellipsis', [ + cB('tree-node', [ + cB('tree-node-content', ` + overflow: hidden; + `, [ + cE('text', ` + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + `) + ]) + ]) + ]), cB('tree-node-indent', ` flex-grow: 0; flex-shrink: 0;