要在Angular PrimeNG TreeTable中启用水平滚动,请按照以下步骤操作:
import {TreeTableModule} from 'primeng/treetable';
@NgModule({
imports: [
TreeTableModule
]
})
export class YourModule { }
import { Component } from '@angular/core';
interface TreeNode {
data: {
[key: string]: any;
};
children?: TreeNode[];
expanded?: boolean;
}
@Component({
selector: 'app-tree-table-demo',
template: `
{{ col.header }}
{{ rowData[col.field] }}
`,
})
export class AppComponent {
nodes: TreeNode[] = [
{
data: {
name: 'Documents',
size: '75kb',
type: 'Folder',
},
children: [
{
data: {
name: 'Work',
size: '55kb',
type: 'Folder',
},
children: [
{
data: {
name: 'Expenses.doc',
size: '30kb',
type: 'Document',
},
},
{
data: {
name: 'Resume.doc',
size: '25kb',
type: 'Resume',
},
},
],
},
{
data: {
name: 'Home',
size: '20kb',
type: 'Folder',
},
children: [
{
data: {
name: 'Invoices',
size: '20kb',
type: 'Text',
},
},
],
},
],
},
];
cols = [
{ field: 'name', header: 'Name' },
{ field: 'type', header: 'Type' },
{ field: 'size', header: 'Size' },
];
}
在TreeTable中启用scrollable
属性,并设置scrollWidth
属性为所需的宽度(例如'1000px'
)。
可以使用CSS样式进一步自定义TreeTable的外观和滚动行为。
通过这些步骤,您可以在Angular PrimeNG TreeTable中启用水平滚动。 免责声明:本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。