vue+elementUI+表格,实现输入框失去焦点获取当前id和当前输入框改变的内容

实现的效果:

步骤:

一. html代码

二. css(less)代码

  .content {
    height: 710px;
    width: 100%;
    background-color: #fff;
    box-shadow: 2px 2px 5px #e6e6e6;
    padding: 0 14px;
    box-sizing: border-box;
    overflow-x: auto;
    .user-list-table {
      .el-table__header-wrapper {
        .has-gutter {
          tr {
            th {
              background-color: #f5faff;
              text-align: center;
              color: #0085f4;
              font-size: 16px;
              .cell {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
      tbody {
        .el-table__row {
          td {
            text-align: center;
            padding: 10px 0px;
            .cell {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              .el-button {
                padding: 6px 20px;
                font-size: 16px;
                &.team {
                  background-color: #0085f4;
                  color: #fff;
                }
                &.site {
                  background-color: #fff;
                  color: #000;
                  border-color: #0085f4;
                }
                &.blacklist {
                  background-color: #ccc;
                  color: #000;
                }
              }
            }
          }
        }
      }
    }
  }

三. js代码

export default {
   data() {
    return {
      tableData: [
         {
          createTime: '2019-09-23',
          levName: '铜',
          orderCount: 0,
          scoreValue: '2',
          serialNumber: '10000',
          status: '1',
          userId: '10',
          userName: '测试1'
        }
      ],  // 用户列表数据
      changeId: '' // 改变的值
    },
     methods: {
     handch(item, id) {
      console.log('我是id:', item, ',我是需要改变的值:', id)
        }
     }
  },