vue.js - 如何在每个表格行中添加按钮？- VueJS 2.5 - 好表

Question

我正在尝试添加一个按钮来替换表格单元格中每一行的“查看详细信息”字样。我试过实现一个模板，每次我保存更改时，表格都没有返回任何结果，这告诉我有些东西坏了。

这是该表当前的样子：

这是我的代码：

  <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' 不等于 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