在实现双击编辑el-table的表格的时候,出现input框和span不能正确显示的问题,百思不得其解,请指教

目标:
实现双击可以编辑el-table的表格

问题:
实现了一个input和一个span来回显隐,双击input框进入编辑状态,什么也不做,点击其他地方退出input框, input框没有消失,非要进入input框之后编辑了退出才正常,请问是哪里的问题?

部分代码:
vue:

<template slot-scope="scope">
 <div @dblclick="dbclickCell(scope.row,scope.$index)">
 <el-input :ref='"tag"+scope.$index'
  @blur="blurFn(scope.row,scope.row.applyNum)"
  v-show="scope.row.isClick"
  v-model="scope.row.applyNum"
  ></el-input>
 <span v-show="!scope.row.isClick">{{scope.row.applyNum}}</span>
 </div></template>

js:

 blurFn(row,num){
  //alert('enter--blurFn');
  row.applyNum = row.newApplyNum;
  row.isClick = false;
  row.applyNum = num;
  console.log(row);
 this.flag = false;
 return row;
},
dbclickCell(row,index){
  if(!this.flag){
    let rindex = 'tag' + index;
  //alert(rindex);
  let num2 = row.applyNum;
  row.isClick = true;
  row.applyNum = 0;
  row.applyNum = num2+"";
  row.newApplyNum = row.applyNum;
  console.log(this.$refs);
 this.flag = true;

 this.$nextTick(()=>{
      this.$refs[rindex].focus();
  });

 return row;
  }
},
讨论数量: 2

【消灭零回答】
你只做了 blur 事件的处理,又没有做类似 click-outside 之类的事件处理,当然只会是点击输入后移出才会有效果啦。
按照你的想法,你需要加一个点击外部的一个事件来处理隐藏的效果。

我这里推荐一个类似效果的,是我之前实际使用的

<template slot-scope="scope">
  <div>
    <span v-text="scope.row.Name"></span>
    <el-popover placement="top" width="160" v-model="scope.row.NameChanging">
      <p>
        <el-input v-model="scope.row.NewName" size="mini" placeholder="请输入新名称" />
      </p>
      <div style="text-align: right; margin-top: 5px">
        <el-button type="text" size="mini" @click="scope.row.NameChanging = false">取消</el-button>
        <el-button type="primary" size="mini" @click="saveNewName(scope.row)">保存修改</el-button>
      </div>
      <el-button type="text" icon="el-icon-edit" circle size="mini" slot="reference"></el-button>
    </el-popover>
  </div>
</template>
1年前 评论

增加个指令可以解决:我们也是动态处理的:

组件内增加

directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input') ? el.querySelector('input').focus() : null
        el.querySelector('textarea') ? el.querySelector('textarea').focus() : null
      }
    }
  },

使用:

<el-input              
                                v-focus
                                type="textarea"
                                rows="5"
                                @blur="handleSaveCell(row['cells'][colKey])"
                              />

这样子就可以动态切换 input 和span

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!