使用带有Angular2 +的VMWare Clarity Design隐藏可扩展Datagrid上的插入符列

Question

我正在使用VMWare Clarity Datagrid组件。

说明

我有两个数据网格，当扩展左数据网格的一行（红色）时，我设法扩展了右边的数据（蓝色）。

我的目标：

1. 隐藏右侧数据网格上的插入符号列，但仍可以展开其行。 当我在浏览器中的display: none;类中添加.datagrid .datagrid-expandable-caret规则时，它可以正常工作，但在.scss文件中却没有。
2. 隐藏左侧数据网格的滚动（红色），但仍可以滚动。
3. 同步两个数据网格的滚动（可能使用第三方代码）。

在这里，我使用angular2 +中的示例制作了plunker。

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

感谢您的每一个建议。

Answer 1

将它添加到您自己的组件样式时它不起作用的原因是.datagrid-expandable-caret元素位于datagrid的shadow DOM中。有关详细说明，请参阅https://angular.io/guide/component-styles#view-encapsulation。

这意味着您有两个等同的解决方案：

1. 在全局CSS样式表中使用这些样式，以便它们可以应用于“模拟”阴影DOM。
2. 在您的组件上使用encapsulation: ViewEncapsulation.None以获得相同的结果。

以下是您的plunker的更新版本，其中显示了第二个解决方案：https://plnkr.co/edit/ss3y1P?p=preview