表格部分

[qiuhaohui163]

1.当表格 [fixHeader]="true" 同时[colDraggable]="true"时 拖动列报错
core.js:6228 ERROR TypeError: Cannot read property 'parentNode' of undefined at HTMLHtmlElement.DataTableHeadComponent.startBecauseMouseMoved (ng-devui-data-table.js:3479) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1647) defaultErrorLogger @ core.js:6228 handleError @ core.js:6281 next @ core.js:42614 schedulerFn.__isAsync @ core.js:37119 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:37079 zone.runOutsideAngular @ core.js:41694 invoke @ zone-evergreen.js:364 run @ zone-evergreen.js:123 runOutsideAngular @ core.js:41488 onHandleError @ core.js:41691 handleError @ zone-evergreen.js:368 runTask @ zone-evergreen.js:170 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647 core.js:6228 ERROR TypeError: Cannot read property 'style' of undefined at HTMLHtmlElement.DataTableHeadComponent.release (ng-devui-data-table.js:3498) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1658)
2. 能否增加表格的边框功能(单元格显示边框)而非只有行显示边框

[qull]

1、问题将在下次版本修复
2、目前设计风格如此，考虑通过开放自定义td样式来实现

[qiuhaohui163]

1、问题将在下次版本修复
2、目前设计风格如此，考虑通过开放自定义td样式来实现

thank 另外建议可否增加列宽调整和列拖拽后的保存功能

[qull]

1、问题将在下次版本修复
2、目前设计风格如此，考虑通过开放自定义td样式来实现

thank 另外建议可否增加列宽调整和列拖拽后的保存功能

这些都有事件，通过事件回调自己保存

[qiuhaohui163]

child: my-component

<...>
  <d-data-table>
    <!-- 固定列-->
    <d-column field="$index" header="index" width="60px"></d-column>
    <!-- 自定义列 由上级传入-->
    <ng-content ngProjectAs="d-column" select="d-column"></ng-content>
  </d-data-table>
</...>

father

<my-component>
  <d-column field="test1" header="test1" width="60px"></d-column>
  <d-column field="test2" header="test2" width="60px">
     <!--    自定义cell-->
  </d-column>
</my-component>

请教一下大佬, 为什么按以上的方法只能显示固定列.
如果改为

    <ng-container ngProjectAs="d-column"  *ngTemplateOutlet="tmp"> </ng-container>
    <ng-template #tmp>
      <d-column field="key" header="key" width="160px"></d-column>
    </ng-template>

方式, 则tmp必须在d-data-table标签之下才能显示, 标签外或者由上级传入无法显示
可否解释一下是哪里用错了,该如何解决, 不胜感谢

[qull]

child: my-component

<...>
  <d-data-table>
    <!-- 固定列-->
    <d-column field="$index" header="index" width="60px"></d-column>
    <!-- 自定义列 由上级传入-->
    <ng-content ngProjectAs="d-column" select="d-column"></ng-content>
  </d-data-table>
</...>

father

<my-component>
  <d-column field="test1" header="test1" width="60px"></d-column>
  <d-column field="test2" header="test2" width="60px">
     <!--    自定义cell-->
  </d-column>
</my-component>

请教一下大佬, 为什么按以上的方法只能显示固定列.
如果改为

    <ng-container ngProjectAs="d-column"  *ngTemplateOutlet="tmp"> </ng-container>
    <ng-template #tmp>
      <d-column field="key" header="key" width="160px"></d-column>
    </ng-template>

方式, 则tmp必须在d-data-table标签之下才能显示, 标签外或者由上级传入无法显示
可否解释一下是哪里用错了,该如何解决, 不胜感谢

你的需求是自定义cell吗？参考API中自定义cell的部分：

<d-column field="gender" header="Gender" [sortable]="true" [width]="'100px'">
  <d-cell>
    <ng-template let-cellItem="cellItem">
      <span dTooltip [content]='cellItem' [position]="'bottom'">
        {{cellItem.toUpperCase()}}
      </span>
    </ng-template>
  </d-cell>
</d-column>

[qiuhaohui163]

child: my-component

<...>
  <d-data-table>
    <!-- 固定列-->
    <d-column field="$index" header="index" width="60px"></d-column>
    <!-- 自定义列 由上级传入-->
    <ng-content ngProjectAs="d-column" select="d-column"></ng-content>
  </d-data-table>
</...>

father

<my-component>
  <d-column field="test1" header="test1" width="60px"></d-column>
  <d-column field="test2" header="test2" width="60px">
     <!--    自定义cell-->
  </d-column>
</my-component>

请教一下大佬, 为什么按以上的方法只能显示固定列.
如果改为

    <ng-container ngProjectAs="d-column"  *ngTemplateOutlet="tmp"> </ng-container>
    <ng-template #tmp>
      <d-column field="key" header="key" width="160px"></d-column>
    </ng-template>

方式, 则tmp必须在d-data-table标签之下才能显示, 标签外或者由上级传入无法显示
可否解释一下是哪里用错了,该如何解决, 不胜感谢

你的需求是自定义cell吗？参考API中自定义cell的部分：

<d-column field="gender" header="Gender" [sortable]="true" [width]="'100px'">
  <d-cell>
    <ng-template let-cellItem="cellItem">
      <span dTooltip [content]='cellItem' [position]="'bottom'">
        {{cellItem.toUpperCase()}}
      </span>
    </ng-template>
  </d-cell>
</d-column>

不是, 是自定义列或者说动态列. 如果按api中的在ts中设置

 dataTableOptions = {
    columns: [
        {
            field: 'firstName',
            header: 'First Name',
            fieldType: 'text'
        },
        {
            field: 'test1',
            header: 'test1',
            fieldType: 'text'
        },
        {
            field: 'test2',
            header: 'test2',
            fieldType: 'text'
        }
    ]
};

这样的话,列是可以根据dataTableOptions 改变而动态,
但是此时test1或者test2 列想动态单元格内容和样式 就无法办到.
因为不确定这张表需要的是test1或test2字段,或者甚至是test3, test4 字段
这些数据会在父级传入时得出.

现在想完成的需求是这样: 有多张表格, 每张表格有部分字段相同, 部分字段不同. 不同字段的单元格内容和样式也不尽相同. 所以想抽出一张公共表.能实现相同的字段的单元格内容和样式直接在公共表里定义完. 不同字段的单元格内容和样式 由在使用这张公共表的父组件中定义

感觉可能是
devui\data-table\data-table.component.ts

205行 @ContentChildren(DataTableColumnTmplComponent) columns: QueryList<DataTableColumnTmplComponent>;

此处的columns

<...>
   <!--可获得-->
   <d-column ...></d-column>
   <!--动态部分无法获得-->
   <ng-content .....></ng-content>
   
</...>

因为是多级传递 ContentChildren无法获得到

[qull]

Metadata Properties: descendants或许可以解决这个问题

[qiuhaohui163]

以其他方式解决了
还是谢谢大佬的回答