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

Question

我使用的是vue-good-table，我正在尝试更改所选行框中的标签区域。查看文档，唯一可用的插槽是所选的行操作。

有没有用标签和“清除”操作编辑左侧的方法/插槽？(不仅仅是他们的文字)

Answer 1

更新：

如前所述，没有任何来自库的直接配置来实现您想要实现的目标。CSS唯一的解决方案如下所示，请看一下这个码箱

<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。