3

我正在使用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;
   }
}

感谢您的每一个建议。

4

1 回答 1

6

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

这意味着您有 2 个解决方案，它们是等效的：

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

这是您的 plunker 的更新版本，它显示了第二个解决方案的工作原理：https ://plnkr.co/edit/ss3y1P?p=preview

于 2017-08-22T14:14:19.593 回答