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

finefish

已于 2022-01-27 08:50:36 修改

阅读量2.4k

点赞数

文章标签： elementui vue.js javascript

于 2022-01-26 17:29:44 首次发布

本文链接：https://blog.csdn.net/finefish/article/details/122705810

版权

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

我的需求是点击单个单元格，修改本单元格的数据。鼠标点击任意地方或者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>

// 文本修改后触发 
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'
        }
      },