Element table inline editing

by mesak

HTML

<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <h2>칼럼들의 셀을 클릭해보세요</h2>
  <template>
    <el-table :data="tableData" style="width: 100%" @cell-click="onCellClick">
      <el-table-column prop="date" label="Date" width="180">
        <template scope="scope">
          <editable-column-content 
          :is-editing="isEditing" :scope="scope" :editing="editing" property="date"
          @blur-input="onCellBlur" @enter-input="onCellBlur">
          </editable-column-content>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
        <template scope="scope">
          <editable-column-content 
          :is-editing="isEditing" :scope="scope" :editing="editing" property="name"
          @blur-input="onCellBlur" @enter-input="onCellBlur">
          </editable-column-content>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address">
        <template scope="scope">
          <editable-column-content 
          :is-editing="isEditing" :scope="scope" :editing="editing" property="address"
          @blur-input="onCellBlur" @enter-input="onCellBlur">
          </editable-column-content>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <pre>
{{editing}}
</pre>
</div>

<template id="editable-column-content">
  <div>
    <div v-if="isEditing 
                  && (scope.row === editing.row) 
                  && (scope.column.property === editing.column.property)">
                  <input :key="editing" type="text" v-focus v-model="scope.row[property]" @blur="$emit('blur-input')" @keyup.enter="$emit('enter-input')">
    </div>
    <template v-else>
      <span style="margin-left: 10px">{{ scope.row[property] }}</span>
    </template>
  </div>
</template>

CSS

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

JavaScript

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

var EditableColumn = {
  template: '#editable-column-content',
  props: ['is-editing', 'scope', 'editing', 'on-blur', 'on-enter', 'property']
}
var Main = {
  data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom1',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom2',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom3',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom4',
          address: 'No. 189, Grove St, Los Angeles'
        }],
        editing: null
      }
    },
    computed: {
      isEditing: function() {
        return this.editing !== null
      }
    },
    methods: {
      onCellClick: function(row, column, cell, event) {
        this.editing = {
          row,
          column,
          cell
        }
      },
      onCellBlur: function(row, column, cell, event) {
        this.editing = null
      }
    },
    components: {
      'editable-column-content': EditableColumn
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')