element中的表格，双击表格出现input框实现修改数据

最新推荐文章于 2024-06-19 20:53:45 发布

归壹∑

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量437

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_72883244/article/details/136509004

版权

 <el-table :data="tableDataList"  @cell-dblclick="tableEdit"> 
                      <el-table-column
                      prop="itemName"
                      label="项目"
                    ></el-table-column>

                    <el-table-column
                      prop="toleranceUp"
                      label="上公差"
                    ></el-table-column>
                    <el-table-column
                      prop="toleranceDown"
                      label="下公差"
                    ></el-table-column>
                    <el-table-column
                      prop="toleranceUnit"
                      label="单位"
                    ></el-table-column>
</el-table>

其中“tableEdit” 是双击的方法，下面是方法内容

   // 双击表格修改数据
    tableEdit(row, column, cell, event) {
      var self = this;
      //想要那一列变化就写上那一列的名字  你们也可以自己写自己的判断  这只是一个例子
      if (column.label == "上公差" || column.label == "下公差") {
        var beforeVal = event.target.textContent;
        event.target.innerHTML = "";
        let str = `<div class='cell'>
            <div class='el-input'>
              <input type='text' placeholder='请输入内容' class='el-input__inner'>
            </div>
        </div>`;
        cell.innerHTML = str;
        //  获取双击后生成的input  根据层级嵌套会有所变化
        let cellInput = cell.children[0].children[0].children[0];
        cellInput.value = beforeVal;
        cellInput.focus(); // input自动聚焦
        // 失去焦点后  将input移除
        cellInput.onblur = function() {
          let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
          cell.innerHTML = onblurCont; // 换成原有的显示内容
          // 调用axios接口
                 。。。。。。。。
           //或者写自己的判断内容
      
          self.addList(row);
        };
      }
    },
 addList(row) {
    
        // 判断uuid是否重复
        const existingItem = this.arrList.find(item => item.uuid === row.uuid)
        if (existingItem) {
          // 如果uuid重复，则覆盖以前的值
          const index = this.arrList.indexOf(existingItem)
          this.arrList[index] = row
        } else {
          // 如果uuid不重复，则将新对象添加到数组中
          this.arrList.push(row)
        }
  
    },
//其中 this.arrList为你们自己设置的数组