SOURCE

new Vue({
       data: function() {
      return {
        tableData: [{
          name: "Tom",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        }, {
          name: "Mac",
          city: "Los Alamos",
          address: "No. 199, Grove St, Los Angeles",
        }, {
          name: "Jesse",
          city: "Los Angeles",
          address: "No. 188, Grove St, Los Angeles",
        }],
        currentIndex: -1,
        currentData: {},
        dialogVisible: false
      }
    },
    methods: {
      addHandle: function() {
        this.currentData = {};
        this.currentIndex = this.tableData.length;
        this.dialogVisible = true;
      },
      editHandle: function(rowData) {
        this.currentData = VueUtil.merge({}, rowData);
        this.currentIndex = this.tableData.indexOf(rowData);
        this.dialogVisible = true;
      },
      delHandle: function(rowData) {
        var index = this.tableData.indexOf(rowData);
        this.tableData.splice(index, 1);
      },
      saveHandle: function() {
        Vue.set(this.tableData, this.currentIndex, this.currentData);
        this.dialogVisible = false;
      }
    }
}).$mount('#app');

<div id="app">
    <vue-table :data="tableData" border style="width: 100%">
  <vue-table-column label="Operations" width="160">
    <template slot-scope="scope">
      <vue-button @click="editHandle(scope.row)" type="primary" icon="vue-icon-edit"></vue-button>
      <vue-button @click="delHandle(scope.row)" type="primary" icon="vue-icon-delete"></vue-button>
    </template>
  </vue-table-column>
  <vue-table-column prop="city" label="City" width="150">
    <template slot-scope="scope">
        {{scope.row.city + ' CITY!'}}
    </template>
  </vue-table-column>
  <vue-table-column prop="name" label="Name" width="120">
  </vue-table-column>
  <vue-table-column prop="address" label="Address" width="300">
  </vue-table-column>
</vue-table>
<vue-button @click="addHandle" >Add Row</vue-button>
<vue-dialog v-model="dialogVisible">
  <vue-form :model="currentData" label-width="100px" >
    <vue-form-item label="City" prop="city">
      <vue-input v-model="currentData.city"></vue-input>
    </vue-form-item>
    <vue-form-item label="Name" prop="name">
      <vue-input v-model="currentData.name"></vue-input>
    </vue-form-item>
    <vue-form-item label="Address" prop="address">
      <vue-input v-model="currentData.address"></vue-input>
    </vue-form-item>
  </vue-form>
  <span slot="footer" class="dialog-footer">
    <vue-button @click="dialogVisible = false">Cancel</vue-button>
    <vue-button type="primary" @click="saveHandle">OK</vue-button>
  </span>
</vue-dialog>
</div>