el-table 點選按鈕 表格自動增加一行，同時新增的行input 自動獲取焦點

1 vue

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.5/lib/index.js"></script>
<div id="app">
 <el-button type="primary" @click="btnclick">主要按鈕</el-button>
<el-input id="aaa" ref="aa" v-model="input" placeholder="請輸入內容">
</el-input>
  <el-table :data="tabledata">
    <el-table-column label='id' prop='id'></el-table-column>
<el-table-column label="名字" prop='name'>
    <template slot-scope="scope">
      <input :id="'name'+scope.row.id"  type='text' v-model='scope.row.name'  />
  </template>
     </el-table-column>
     </el-table>
</el-table>
</div>

2 js

var Main = {
  data() {
    return {
      input: '',
      tabledata:[]
    }
  },
  methods:{
    btnclick(){
      console.log('aa');
      this.input = "aaa";
      this.tabledata.push({id:1,name:'sj'});
      var that = this;
       this.$nextTick(function () {
         document.getElementById('name1').focus();
  })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

本作品採用《CC 協議》，轉載必須註明作者和本文連結