elementUI 表格點擊行可編輯

如題  需要點擊表格某一行，讓其變成可編輯狀態

html:

<el-table-column prop="remark" label="備注">
          <template slot-scope="{row, $index}">
            <div @click.stop="{{changeNum($index,'editRemarkInput')}}">
              <el-input
                v-if="editable[$index]"
                v-model="row.remark"
                size="mini"
                class="editRemarkInput"
              ></el-input>
              <span v-else>{{row.remark}}</span>
            </div>
          </template>
        </el-table-column>

js:

changeNum(index, className){
      //設置是否可以編輯

      // tableList為表格數據
      this.editable = new Array(this.tableList.length);

      this.editable[index] = true;

      this.saveItem = this.tableList[index];

      this.$set(this.editable, index, true);
      //讓input自動獲取焦點
      this.$nextTick(function() {
          var editInputList = document.getElementsByClassName(className);
          editInputList[0].children[0].focus();
        });

    },