<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为你们自己设置的数组

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐