实现表格双击后变输入框

双击后效果，本次需求我的代码中始终只会保持一个输入框每次都会执行stopEditing 函数
还有一种实现方式就是在tableData2中的每一个对象中加一个布尔值，然后失焦、聚焦的时候直接修改这个值显示

javascript 复制代码

    <!-- 编辑测量数据弹框 -->
    <Dialog title="编辑测量数据" width="1200px" :visible.sync="editMeasureShow" append-to-body v-dialogDrag>
      <el-table
        :data="tableData2"
        class="tableData2_class"
        border
        stripe
        :header-cell-style="{
          background: '#f1f3f5',
          color: '#000000'
        }"
      >
       
        <el-table-column align="center" prop="weight" label="重量(KG)">
          <template v-slot="{ row }">
            <div
              style="width: 100%; cursor: pointer"
              @dblclick="startEditing(row, 'weight')"
              v-if="!row.isEditingWeight"
            >
              {{ row.weight || '--' }}
            </div>
            <el-input
              v-else
              ref="weightInput"
              v-model="row.weight"
              @blur="stopEditing(row, 'weight')"
              @keyup.enter="stopEditing(row, 'weight')"
              type="number"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="length" label="长(CM)">
          <template v-slot="{ row }">
            <div
              style="width: 100%; cursor: pointer"
              @dblclick="startEditing(row, 'length')"
              v-if="!row.isEditingLength"
            >
              {{ row.length || '--' }}
            </div>
            <el-input
              v-else
              ref="lengthInput"
              v-model="row.length"
              @blur="stopEditing(row, 'length')"
              @keyup.enter="stopEditing(row, 'length')"
              type="number"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="width" label="宽(CM)">
          <template v-slot="{ row }">
            <div style="width: 100%; cursor: pointer" @dblclick="startEditing(row, 'width')" v-if="!row.isEditingWidth">
              {{ row.width || '--' }}
            </div>
            <el-input
              v-else
              ref="widthInput"
              v-model="row.width"
              @blur="stopEditing(row, 'width')"
              @keyup.enter="stopEditing(row, 'width')"
              type="number"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="height" label="高(CM)">
          <template v-slot="{ row }">
            <div
              style="width: 100%; cursor: pointer"
              @dblclick="startEditing(row, 'height')"
              v-if="!row.isEditingHeight"
            >
              {{ row.height || '--' }}
            </div>
            <el-input
              v-else
              ref="heightInput"
              v-model="row.height"
              @blur="stopEditing(row, 'height')"
              @keyup.enter="stopEditing(row, 'height')"
              type="number"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editMeasureShow = false">取消</el-button>
        <el-button type="primary" @click="editMeasureDataSubmit">确认</el-button>
      </span>
    </Dialog>

javascript 复制代码

 methods: {
   stopEditing (row, field) {
      // 假设 传递 weight
      // field.charAt(0).toUpperCase() + field.slice(1)
      // 这个位置组成  field.charAt(0).toUpperCase()  // W
      // 这个位置组成  field.slice(1)  // eight
      //  我是为了规范驼峰 对应这里的控制  v-if="!row.isEditingWeight"
      // 不想的话直接这样 `isEditing${field}`  对应的if 也得改
      this.$set(row, `isEditing${field.charAt(0).toUpperCase() + field.slice(1)}`, false)
    },

    startEditing (row, field) {
      this.$set(row, `isEditing${field.charAt(0).toUpperCase() + field.slice(1)}`, true)
      this.$nextTick(() => {
        const input = this.$refs[`${field}Input`]
        if (input) {
          input.focus()
          // input.select() // 全选 输入框中的内容 按需开启
        }
      })
    },

  editMeasureDataSubmit(){
    // to do something
    }
}

css 复制代码

// 样式也加一下 增大区域
.tableData2_class {
  width: 100%;
  margin-top: 20px;
  ::v-deep .el-table__row {
    height: 54px;
  }
}