element表格 el-table双击单元格修改数据鼠标离开焦点提交参数确定

最新推荐文章于 2024-03-14 16:30:23 发布

北半球的狗

最新推荐文章于 2024-03-14 16:30:23 发布

阅读量1.4k

点赞数 2

文章标签： javascript vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_48305373/article/details/128184878

版权

双击触发单元格变成输入款 @cell-dblclick=“tableEdit”

<el-table
        :data="detailedtableData"
        style="width: 100%"
        border
        @cell-dblclick="tableEdit"
        @selection-change="handleSelectionChange"
      >

@cell-dblclick有四个参数

  tableEdit(row, column, cell, event) {
      console.log(column.id, column.property, column, row, event, "column");
      //如果这里只想编辑某一列或几列判断一下就行：column.label === '列1'
      if (column.label) {
        //取出单元格的值
        var beforeVal = event.target.textContent;
        //置空单元格容器内元素
        event.target.innerHTML = "";
        //替换成el-input
        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自动聚焦
        // "TITLE_PROPER"
        // 失去焦点后  将input移除
        cellInput.onblur = () => {
          let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
          cell.innerHTML = onblurCont; // 换成原有的显示内容
          // 调用axios接口
          this.archiveData.param = {
            [column.property]: cellInput.value,
            ID: row.ID,
          };
          archiveUpdate(this.archiveData).then((response) => {
            console.log(response);
            if (response.status == "000000") {
              this.msgSuccess("修改条目成功！");
              this.dialogVisibleDetailed = false;
              // this.handleDetailed(row);
            } else {
              this.msgError(response.errors);
            }
          });
        };
      }
    },