el-table 点击切换input修改单元格

最新推荐文章于 2025-02-04 11:06:10 发布

原创最新推荐文章于 2025-02-04 11:06:10 发布 · 561 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

博客围绕Vue相关技术展开，提及表格渲染，介绍了中转参数orderId，可绑定scope值，一次修改一行。还强调input聚焦要对应表格中元素。

1.表格渲染

<el-table-column align="center" prop="sysOrderId" label="订单编号" min-width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="!scope.row.sysOrderId">
                <el-input :id="'sysOrderInput_' + scope.$index" v-model='orderId' style='width: 90%' v-if="scope.row.orderFlag" @blur="updateOrderId(scope.row, scope.$index)"></el-input>
                <el-button type="text" class="el-icon-edit-outline" @click="handleOrderEdit(scope.row, scope.$index)"></el-button>
              </div>
              <span v-else>{{scope.row.sysOrderId}}</span>
            </template>
 </el-table-column>

2.方法

orderId ---中转参数，也可以绑定scope值，但一次只修改一行，重新定义也无妨

handleOrderEdit(item, index) {
      item.orderFlag = true
      this.$nextTick(() => {
        document.getElementById(`sysOrderInput_${index}`).focus()
      })
    },
updateOrderId(item) {
      this.$service.axios({
        sysRefundId: item.sysRefundId,
        orderId: this.orderId
      }).then(res => {
        if (res.errorCode === '0') {
          this.$message.success('操作成功')
          this.getList()
        }
      }).catch(() => {
        this.orderId = ''
        this.getList(this.pageNum)----请求
 })

3，input聚焦需对应表格中元素！！！