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中的“详细信息”不等于“详细信息”。

所以工作代码如下：

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

这是一个有效的Codepen： https://codesandbox.io/s/nnpqpn6ll4?fontsize=14

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

1 个答案: