如何在每个表行中添加按钮？- VueJS 2.5 - good-table

Question

我正在尝试添加一个按钮来替换表格单元格中每一行的"View Details“字样。我曾尝试实现一个模板，但每次保存更改时，表都不会返回任何结果，这说明有什么地方出了问题。

这是该表当前的样子：

​

下面是我的代码：

  <vue-good-table
                :columns="columns"
                :rows="rows"
                :globalSearch="true"
                :paginate="true"
                :responsive="true"
                :lineNumbers="false"
                class="styled"
                styleClass="table">
                 <template slot="table-row" slot-scope="props">
                      <span v-if="props.column.field == 'Details'">
                        <button type="button" class="btn btn-primary">
                        View Details
                        </button>
                      </span>
                      <span v-else>
                          {{props.formattedRow[props.column.field]}}
                      </span>
                  </template>
              </vue-good-table>

。。。。

  columns: [
        {
          label: "Date",
          field: "date",
          filterable: true
        },
        {
          label: "Event",
          field: "event",
          filterable: true
        },
        {
          label: "Details",
          field: "details",
          filterable: true
        }
      ],
      rows: [
        {
          event: "Thanksgiving Barrel Events",
          details: "View Event",
          date: "11/28/2018 at 6:34 PM"
        },
        {
          event: "Christmas Barrel Events",
          details: "View Event",
          date: "12/25/2018 at 6:34 PM"
        },

​

​

Answer 1

你做的一切都是对的，除了你留下了一个拼写错误，检查列的字段是否为"Details"，而它的“details”(小写)。

对于字符串，'Details‘不等于javascript中的'details’，因为字符串区分大小写，请不要忘记这一点。

因此，工作代码如下所示：

<vue-good-table
  :columns="columns"
  :rows="rows"
  :globalSearch="true"
  :paginate="true"
  :responsive="true"
  :lineNumbers="false"
  class="styled"
  styleClass="table">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'details'">
      <button type="button" class="btn btn-primary">
      View Details
      </button>
    </span>
    <span v-else>
        {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

下面是一个有效的代码：https://codesandbox.io/s/nnpqpn6ll4?fontsize=14