elementUI 表格点击行可编辑

Posted 2020-11-16 suiyide

如题  需要点击表格某一行，让其变成可编辑状态

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();
        });

    },