VUE el-table表格实现双击编辑，单机空白处放弃修改，回车提交修改

VUE el-table表格实现双击编辑，单机空白处放弃修改，回车提交修改

template

    <el-row>
      <el-col :span="24">
        <el-table @cell-dblclick="handleCellDBClick" :data="tabledata" border>
          <!-- 生成列-->
          <el-table-column align="center" v-for="column in columns" :key="column.prop"
                           :label="column.columnName" :property="column.prop">
            <template slot-scope="scope">
              <!-- 双击时展示input，save实现数据保存-->
              <el-input :id="column.prop" type="text" v-if="scope.row.isEdit === column.prop"
                        v-model="scope.row[column.prop]"
                        @keyup.enter.native="save(scope)" @blur="blurfun(scope)"/>
              <span v-else :class="[scope.row.id ? '' : 'summary']">{{
                  scope.row[column.prop]
                }}</span>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!--分页器-->
        <el-pagination
            @current-change="page"
            background
            layout="prev, pager, next"
            :prev-text="'上一页'"
            :next-text="'下一页'"
            :page-size="6"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>

script

 data() {
    return {
      //  数据量
      total: 100,
      //  表格数据
      tabledata: [
        {
          id: 1,
          name: '张三',
          entrytime: '2022-07-31',
          education: '本科',
          role: '学生',
          username: '23520981',
          password: '123456',
        },
        {
          id: 2,
          name: '张三',
          entrytime: '2022-07-31',
          education: '本科',
          role: '学生',
          username: '23520981',
          password: '123456',
        },
        {
          id: 3,
          name: '张三',
          entrytime: '2022-07-31',
          education: '本科',
          role: '学生',
          username: '23520981',
          password: '123456',
        },
        {
          id: 4,
          name: '张三',
          entrytime: '2022-07-31',
          education: '本科',
          role: '学生',
          username: '23520981',
          password: '123456',
        },
      ],
      //	定义字段
      columns: [
        {
          columnName: '序号',
          prop: 'id'
        },
        {
          columnName: '姓名',
          prop: 'name'
        },
        {
          columnName: '入职时间',
          prop: 'entrytime'
        },
        {
          columnName: '学历',
          prop: 'education'
        },
        {
          columnName: '角色',
          prop: 'role'
        },
        {
          columnName: '用户名',
          prop: 'username'
        },
        {
          columnName: '密码',
          prop: 'password'
        },
      ],
      oldinfo: '',
    }
  },
      
  methods: {
    page(val) {
      this.$message({message: `当前页: ${val}`, type: 'success'})
    },
    handleCellDBClick(row, column, cell, event) {
      this.oldinfo = row[column.property]
      const columnName = column.property
      const unEditColumns = ['id']
      //如果点击的是地区这一列，则提示不可编辑
      if (unEditColumns.includes(columnName)) {
        return this.$message({message: '当前列不可编辑', type: 'error'})
      }
      //设置isEdit属性
      this.$set(row, 'isEdit', columnName)
      this.$nextTick(() => {
        //input标签获取焦点
        document.getElementById(columnName).focus()
      })
    },
    save({row, column}, val, eventStr) {
      this.oldinfo = row[column.property]
      //数据复位，此时input隐藏，展示span
      this.$set(row, 'isEdit', null)
      //调用后台接口保存数据
      //     ...
    },
    blurfun({row, column}, val, eventStr) {
      //  失去焦点事件
      row[column.property] = this.oldinfo
      this.oldinfo = ''
      this.$set(row, 'isEdit', null)
    },

  },

style

/*表格样式*/
/* 基本表格样式 */
table {
    border-collapse: collapse;
    width: 100%;
}

table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f2f2f2;
    text-align: left;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
}

table td {
    text-align: left;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    font-size: 18px;
    cursor: pointer;
    /*font-weight: bold;*/
}

/* 斑马线表格 */
table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 悬浮表格 */
table:hover tr:not(:hover) {
    opacity: 0.2;
}

/*tfoot {*/
/*    text-align: center;*/
/*}*/

el-pagination {
    text-align: center;
}