在实现双击编辑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;
  }
},

alers_2080

4 声望

暂无个人描述~

0 人点赞

讨论数量: 2

chuoke

Laravel 8.x 译者 532 声望

【消灭零回答】
你只做了 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>

2年前评论

raybon

Laravel 8.x 译者 325 声望 / php @ 远程

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

组件内增加

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

2年前评论

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

帮助

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录