elementUI 表格点击行可编辑

最新推荐文章于 2024-07-29 14:24:01 发布

weixin_30586085

最新推荐文章于 2024-07-29 14:24:01 发布

阅读量1.7k

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/suiyide/p/11597946.html

版权

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

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

    },

转载于:https://www.cnblogs.com/suiyide/p/11597946.html