vue의 vue-good-table에 편집 버튼을 추가하는 방법

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"이 작동하지 않습니다.

이거 드셔보세요

<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

            })

        },

다음은 marekfilip을 사용하여 "편집" 버튼을 연속적으로 추가하는 좋은 예입니다.

https://jsfiddle.net/marekfilip/jm4ywzor/

html:

<div id="app">
  <vue-good-table
    :columns="columns"
    :rows="rows" >
    
    <template slot="table-row" slot-scope="props">
      <span v-if="props.column.field == 'before'">
        <button @click="editRow(props.row.id)">Edit</button>
        <button @click="deleteRow(props.row.id)">Delete</button>
      </span>
      <span v-else>
        {{props.formattedRow[props.column.field]}}
      </span>
    </template>
    
  </vue-good-table>
    
  <span>{{ text }}</span>

</div>

자바스크립트

new Vue({
  el: '#app',
  data() {
    return {
      columns: [
        {
          label: 'Before',
          field: 'before'
        },
        {
          label: 'ID',
          field: 'id',
          sortable: true,
        },
        {
            label: 'Text',
          field: 'text',
          type: 'number',
          sortable: true,
        },
      ],
      rows: [
        { text: 'A', id: 1 },
        { text: 'B', id: 2 },
        { text: 'C', id: 3 },
        { text: 'D', id: 5 },
      ],
      text: ''
    };
  },
  methods: {
    editRow(id) {
        this.showAlert(id, 'EDIT')
    },
    deleteRow(id) {
        this.showAlert(id, 'DELETE')
    },
    showAlert(id, type) {
        this.text = `You clicked ${type} on row ID ${id}`
    }
  }
});

언급URL : https://stackoverflow.com/questions/50002895/how-to-add-edit-button-on-vue-good-table-in-vue