Vue elementui Table Double-click a cell for editing, focusing, losing focus, showing hidden input and span

<el-table:d ata= "Tabledata"
          Class= "Tb-edit"
          Style= "width:100%"
          ref= "Multipletable"
          @selection-change= "Handleselectionchange"
          Highlight-current-row
          @cell-dblclick= "Dblhandlecurrentchange"
>

Dblhandlecurrentchange (row, column, cell, event) {
  Switch (Column.label) {
    Case "Longitude (°)":
      Row.longitudeflag = true;
      Break
    Case "Latitude (°)":
      Row.dimensionflag = true;
      Break
    Case "distance (m)":
      Row.heightflag = true;
      Break
  }
},

Focus needs to add the following code in the public JS inside:

Vue.directive (' Focus ', function (el, option) {
  var defclass = ' El-input ', Deftag = ' input ';
  var value = Option.value | | True
  if (typeof value = = = ' Boolean ')
    Value = {Cls:defclass, tag:deftag, foc:value};
  Else
    Value = {Cls:value.cls | | defclass, TAG:VALUE.TAG | | deftag, FOC:VALUE.FOC | | false};
  if (El.classList.contains (VALUE.CLS) && VALUE.FOC)
    El.getelementsbytagname (Value.tag) [0].focus ();
});


Lost focus Method:

Inputblur (Row, event, column) {
  Let tabled = This.tabledata;
  Tabled.foreach (function (item) {
    Item.longitudeflag = false;
    Item.dimensionflag = false;
    Item.heightflag = false;
  });
},

Vue elementui Table Double-click a cell for editing, focusing, losing focus, showing hidden input and span