如何更改 vue-good-table 中选定的行标签区域

Question

我正在使用 vue-good-table 并且我正在尝试更改所选行框中的标签区域。查看 documentation 唯一可用的插槽是 selected-row-actions。

有没有办法/插槽来编辑带有标签和“清除”操作的左侧？ （不仅仅是他们的文字）

Answer 1

更新：

如前所述，库中没有任何直接配置可以实现您想要实现的目标。仅 CSS 的解决方案如下所示，看看这个codesandbox：

<template>
...
</template>
<style>
.vgt-selection-info-row {
  font-size: 0 !important;
}
.vgt-selection-info-row__actions.vgt-pull-right {
  visibility: visible;
  float: none !important;
}
</style>

原答案：

开箱即用的库不支持任何类似的东西。您可以使用table-actions 插槽在右上角显示表级操作，也可以使用selected-row-actions 插槽在选择信息栏上显示所选行的操作，例如：

<div slot="selected-row-actions">
  <button @click="countSelected()">Sected Row Action</button>
</div>
<div slot="table-actions">
  Table Actions 
</div>

话虽如此，我们正在谈论它的 HTML（耶！）所以没有什么能阻止您覆盖库的默认样式。

您可以使用以下样式来使用selected-row-actions 插槽并将插槽移动到清除按钮旁边：

<template>
...
<div slot="selected-row-actions">
    <label>Label 1</label>
    <button @click="countSelected()">Action 1</button>
    <label>Label 1</label>
    <button @click="countSelected()">Action 2</button>
</div>
...
</template>
<style>
  .vgt-selection-info-row__actions.vgt-pull-right {
    float: none !important;
    margin-left: 5px;
    display: inline;
  }
  .vgt-selection-info-row__actions.vgt-pull-right div {
    display: inline-block;
  }
</style>

PS：如果你想重新打开它并跟踪，图书馆已经有一个已关闭的问题BUG 519。