VueJS el-table edit column

by Rajan Paneru

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template> 
    <el-table :data="tableData" strip border style="width: 100%" stripe>
            <el-table-column label="Name">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" :disabled="!scope.row.edited"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="Address">
              <template slot-scope="scope">
                <el-input v-model="scope.row.address" :disabled="!scope.row.edited"></el-input>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="default" @click="handleSaveRow(scope.$index)">Save</el-button>
                <el-button type="primary" @click="handleEditRow(scope.$index)">Edit</el-button>
              </template>
            </el-table-column>
          </el-table>
  </template>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

JavaScript

var Main = {
      data() {
        return {
          tableData: [{
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            edited: false
          }, {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            edited: false
          }, {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            edited: false
          }, {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            edited: false
          }]
        }
      },
      methods: {
      	handleEditRow(index) {
            this.tableData[index].edited = true
        },
        handleSaveRow(index) {
          this.tableData[index].edited = false
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')