如何在vue中的vue-good-table上添加编辑按钮

Question

我是 Vue 的新手并且陷入了困境，如果有人建议我如何做到这一点，我不知道该怎么做，让我先展示我的代码

<div class="table-responsive-sm">
    <vue-good-table
        title="Shop List Table"
        :columns="columns"
        :rows="rows"
        :paginate="true"
        :lineNumbers="true"
        :globalSearch="true" >
  <template slot="table-row" slot-scope="props" ><a class="btn btn-sm primary"  @on-row-click="onRowClick">save</a></template>
   </vue-good-table>

并在脚本中

 data(){
   return{
       columns: [
            {
              label: 'Brand Name',
              field: 'brand_name', 
            },
             {
              label: 'Brand Desc',
              field: 'brand_desc',  
            },
             {
               label: 'Action',
               field: 'before',
            },        
       ],
   rows:[],
          }
       }
      getTotals(){
            var self = this;
            var new1=[];
            this.$http.get('/api/brands')
            .then(function (response) {
             self.rows=response.data

            })

        },

现在我的问题是，如果我使用

 <span v-if="props.column.field == 'before'">
     before
  </span>   

正如在这个https://jsfiddle.net/aks9800/hsf0sqf8/ 中所建议的，它会抛出一个错误，如未定义字段我只想添加一个额外的操作按钮进行编辑 这是 vue-good 表 还有一件事 没有建议的操作在此链接中，例如：- @on-row-click="onRowClick" 不起作用

Answer 1

尝试这个

<div class="table-responsive-sm">
    <vue-good-table
        title="Shop List Table"
        :columns="columns"
        :rows="rows"
        :paginate="true"
        :lineNumbers="true"
        :globalSearch="true" >
          <template slot="table-row" slot-scope="props" >
          <a class="btn btn-sm primary"  @on-row-click="onRowClick">save</a>
          </template>
          <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'actions'">
          <a class="btn btn-sm primary"  @on-row-click="onRowClick">save</a>
        </span>
        <span v-else>
          {{props.formattedRow[props.column.field]}}
        </span>
      </template> 
   </vue-good-table>
</div>

data(){
   return{
       columns: [
            {
              label: 'Brand Name',
              field: 'brand_name', 
            },
             {
              label: 'Brand Desc',
              field: 'brand_desc',  
            },
            {
              label: 'Actions',
              field: 'actions',
              sortable: false,
            }      
       ],
   rows:[],
          }
       }
      getTotals(){
            var self = this;
            var new1=[];
            this.$http.get('/api/brands')
            .then(function (response) {
             self.rows=response.data

            })

        },