element表格(el-table)单元格文本框el-input修改

在网上找了一些大神的修改方式,都不太适合自己。

我的需求是点击单个单元格,修改本单元格的数据。鼠标点击任意地方或者enter键失去焦点触发修改。

HTML

<el-table  border style="width: 100%" 
           size="mini" :data="comprResults" class="cpr-result-table" 
           highlight-current-row 
           @cell-dblclick="resultCellClick">
                      <el-table-column prop="date" label="编号" width="50" align="center"> <template slot-scope="scope"> {{ scope.$index + 1}}</template></el-table-column>
                      <el-table-column prop="date" label="特征分数阀值" width="95" align="center">
                        <template slot-scope="scope">
                          <span class="current-span" >{{ scope.row.score1 }}</span>
                          <el-input size="mini" v-model="scope.row.score1" style="display: none"
                                    @blur = "scoreInpBlur(scope.row, scope.$index, $event)" 
                                    @change="scoreChange"
                                    @keyup.enter.native="scoreInpKeydown"
                          ></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="date" label="匹配分数阀值" width="95" align="center">
                        <template slot-scope="scope">
                          <span class="current-span" >{{ scope.row.score2 }}</span>
                          <el-input size="mini" v-model="scope.row.score2" style="display: none"
                                    @blur = "scoreInpBlur(scope.row, scope.$index, $event)"
                                    @change="scoreChange"
                                    @keyup.enter.native="scoreInpKeydown"
                          ></el-input>
                        </template>
                      </el-table-column>

JS

// 文本修改后触发 
scoreChange(score) {
        .....

      },
// enter键失去焦点
      scoreInpKeydown(e) {
        e.target.blur()
      },
//文本框失去焦点
      scoreInpBlur(row, index, e) {
        e.target.parentNode.style.display = 'none'
        e.target.parentNode.previousSibling.style.display = 'block'
      },
//单元格点击
resultCellClick(row, column, cell, event) {
        
        if(event.target.className === 'current-span') {   // 点到文字
          event.target.nextSibling.style.display = 'block'
          event.target.nextSibling.children[0].focus()
          event.target.style.display = 'none'
        } else if(event.target.className === 'cell') {   // 点到单元格
          event.path[0].children[1].style.display = 'block'
          event.path[0].children[1].children[0].focus()
          event.path[0].children[0].style.display = 'none'
        }
      },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值