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

Question

我正在使用vue-good-table，并且尝试更改所选行框中的标签区域。从documentation看，唯一可用的位置是选定的行动作。

是否有一种方法/插槽可以编辑带有标签和“清除”操作的左侧？ （不仅仅是他们的文字）

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已关闭。