表格部分 about ng-devui

[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]

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