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

最新推荐文章于 2025-05-14 14:22:49 发布

麦兜:)

最新推荐文章于 2025-05-14 14:22:49 发布

阅读量1.5w

点赞数 1

分类专栏：前端开发文章标签： vue element 业务逻辑

本文链接：https://blog.youkuaiyun.com/qq_40544291/article/details/102604710

版权

前端开发专栏收录该内容

36 篇文章

订阅专栏

实现的效果:

在这里插入图片描述

步骤:

一. html代码

 <!-- 用户列表表格 -->
    <div class="user-list-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="userId" label="序号"> </el-table-column>
        <el-table-column prop="userName" label="昵称" width="">
        </el-table-column>
        <el-table-column prop="serialNumber" label="手机号" width="">
        </el-table-column>
        <el-table-column prop="createTime" label="加入日期" width="">
        </el-table-column>
        <el-table-column prop="levName" label="合伙人等级" width="">
        </el-table-column>
        <el-table-column prop="orderCount" label="订单数" width="">
        </el-table-column>
        <el-table-column label="可用积分" width="">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.scoreValue"
              @blur="handch(scope.row.userId,scope.row.scoreValue)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="合伙人团队" width="">
          <template slot-scope="scope">
            <el-button size="small" class="team">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="">
          <template slot-scope="scope">
            <el-button size="small" class="site">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="">
          <template slot-scope="scope">
            <el-button size="small" class="blacklist">拉黑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

二. 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)
        }
     }
  },