Element: Popup Editable

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-table ref="singleTable" :data="tableData" highlight-current-row @cell-click="handleCellClick" stripe style="width: 100%">
    <el-table-column type="index" width="50">
    </el-table-column>
    <el-table-column property="id" label="Name" width="200">
      <template slot-scope="scope">
        <span v-if="scope.$index !== currentIndex">
          {{scope.row.name}}
        </span>
        <el-select v-else ref="Name" v-model="scope.row.id">
          <el-option 
            v-for="it in itemOpts" 
            :key="it.value" 
            :label="it.label"
            :value="it.value"
            ></el-option>
        </el-select>
      </template>
    </el-table-column>
    
    <el-table-column property="qty" label="Qty" width="120">
      <template slot-scope="scope">
        <span v-if="scope.$index !== currentIndex">
          {{scope.row.qty}}
        </span>
        <el-input v-else ref="Qty" v-model="scope.row.qty"/>
      </template>
    </el-table-column>
    
    <el-table-column property="price" label="Price" width="120">
      <template slot-scope="scope">
        <span v-if="scope.$index !== currentIndex">
          {{scope.row.price}}
        </span>
        <el-input v-else ref="Price" v-model="scope.row.price"/>
      </template>
    </el-table-column>
    
  </el-table>
</div>

SCSS

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

Babel + JSX

var Main = {
    data() {
      return {
      	itemOpts: [
        	{label: 'A', value: 'a'},
        	{label: 'B', value: 'b'},
        	{label: 'C', value: 'c'},
        ],
        tableData: [{
          id: 'a',
          name: 'A',
          qty: 1,
          price: 10,
        }, {
          id: 'b',
          name: 'B',
          qty: 2,
          price: 5
        }],
        currentIndex: null,
      }
    },

    methods: {
      handleCellClick(row, column) {
        let index = this.tableData.indexOf(row)
				this.currentIndex = index
        
      	console.log(row, column, index)

				this.$nextTick(()=>{
        	let label = column.label
          
        	if( label === 'Name'){
          	this.$refs[label].$el.querySelector('input').click()
          }else if (label === 'Qty' || label === 'Price'){
            this.$refs[label].focus()
          }
        })
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')