Vue ElementUI table implements a method of double-clicking to modify and edit a certain content

1. Use@cell-dblclickEvent, triggers event when double-clicked

<el-table @cell-dblclick="handleCellDblClick"

2. Cell settings

The main focus is to judge whether to switch the input box when double-clicking, then bind the ref, set the trigger point method when the focus is lost, and press the enter key to trigger point method.

&lt;el-table-column prop="name" label="Name" width="180"&gt;
      &lt;template slot-scope="scope"&gt;
        &lt;span v-if="editableData !== "&gt;{{  }}&lt;/span&gt;
        &lt;el-input
          v-else
          :ref="'input-' + scope.$index"
          v-model=""
          @blur="handleInputBlur()"
          @="handleInputEnter()"
        &gt;&lt;/el-input&gt;
      &lt;/template&gt;
    &lt;/el-table-column&gt;

3. Add the currently edited data

editableData: null, // The currently edited data item

4. Give logic to all methods

// Triggered when double-clickedhandleCellDblClick(row, column, cell, event) {
  if ( === 'customerBoxNum') {
     = row; // Set the currently edited data item    this.$nextTick(() =&gt; {
      const inputRef = 'input-' + (row);
      const inputElement = this.$refs[inputRef];
      if (inputElement) {
        (); // Focus input box      } else {
        ('Input element not found:', inputRef);
      }
    });
  }
},
handleInputBlur(row) {
  // Save changes when the input box loses focus   = null; // Return to static display status},
handleInputEnter(row) {
  // Save changes when pressing Enter   = null; // Return to static display status},

5. Finish the work

This is the article about the method of double-clicking the VueElementUI table to edit a certain content. For more related Vue ElementUI table to modify the content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!