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

Question

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

是否有 way/slot 编辑带有标签和 'clear' 操作的左侧？（不仅仅是他们的文字）

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 插槽在右上角显示 table 级操作，或者可以使用 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。

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

How to change selected row labels area in vue-good-table

vuejs2

vue-good-table