首页 > 其他 > 详细

elementUI 表格点击行可编辑

时间:2019-09-27 15:51:10      阅读:189      评论:0      收藏:0      [点我收藏+]

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

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

    },

  

elementUI 表格点击行可编辑

原文:https://www.cnblogs.com/suiyide/p/11597946.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!