码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI 表格点击行可编辑

时间:2019-09-27 15:21:53      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:mini   item   classname   数据   编辑   index   html   temp   highlight   

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

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 表格点击行可编辑

标签:mini   item   classname   数据   编辑   index   html   temp   highlight   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!