时间戳

首页 > 解决方案 > 如何在 vue 的 vue-good-table 上添加编辑按钮

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

问题描述

我是 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" 不起作用

标签： vuejs2

解决方案

试试这个

<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

            })

        },

推荐阅读