element +vue编辑某行元素使其变为可编辑状态

Question

问题描述

table行的地址元素默认显示为span，当我点击这一行的地址元素时，显示为input可编辑状态。
但是现在我遇到的问题就是，要么点击后table每一行都是input，要么都是span，实现指定行的span和input切换未实现。
第一张图是未编辑状态（默认状态下是span），第二张是处于编辑状态下的（本应该是某行是input状态，结果还是处于span），请各位老师指导一下

问题出现的环境背景及自己尝试过哪些方法

获取到这一行的index，根据table所绑定的数据flyRoutes来确定当前 所编辑的元素，然后结合
v-if="flyRoutes[$index]"来判断该显示span还是input

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

这是html：

    <el-table-column prop="name" label="地址" class="address_name">
            <template slot-scope="{row, $index}">
              <div @click.stop="editAddress($index,'editRemarkInput')">
                <el-input v-if="flyRoutes[$index]"
                     v-model="row.name"
                     size="mini" type="text"
                     class="editRemarkInput">
                 </el-input>
                <span v-else>{{row.name}}</span>
              </div>
            </template>
     </el-table-column>

这是js：

    editAddress(index, className) {
    let _this = this;
   // flyRoutes为表格数据
   _this.editable = new Array(this.flyRoutes.length);
   _this.flyRoutes[index] = true;
   this.$set(_this.editable, index, true);
   //让input自动获取焦点
   _this.$nextTick(function () {
     let editInputList = document.getElementsByClassName(className);
     editInputList[0].children[index].focus();
   });
 },

你期待的结果是什么？实际看到的错误信息又是什么？

table行的地址元素默认显示为span，当我点击这一行的地址元素时，显示为input可编辑状态（比如初始状态下是）。
并且获取到input框的焦点如果失去焦点，则又显示为span。

Answer 1

先在table跟组件下添加一个 @cell-click="tabClick"方法。完了在 <el-table-column >下绑定scope.row.id===当前行的id，tabClickLabel === '地址'（当前列的label）
<span v-if="scope.row.id === tabClickIndex && tabClickLabel === '地址'">
<el-input vmodel="scope.row.name" maxlength="300" size="mini"
@blur="inputBlur" /></span>。
data中添加tabClickIndex: null, // 点击的单元格，tabClickLabel: "" // 当前点击的列名。这两个变量。
js：tabClick（row, event, column）{
if (column.label == "地址") {
let that=this;
        that.tabClickIndex = row.id ;
        that.tabClickLabel = column.label;
      } else {
        that.tabClickIndex = null;
        that.tabClickLabel = "";
      }
}
 inputBlur(row, event, column) {
      this.tabClickIndex = null;
      this.tabClickLabel = "";
    }
这样就可以实现在指定行元素切换span和input了