Vue3 implements editable table cells

In the past, editing the content of the table was to click the edit button to enter the edit page or pop-up window to edit the entire row.

But this time, because the project needs to implement the function of editing the corresponding cell by double-clicking in the table, it is also a new challenge for me who have never done it.

The effect that needs to be achieved:

Option One

Since the project uses element-ui, the first thing I thought of was to go to the table component to find out if there are any attributes that can meet this requirement. I didn't expect it to exist (cell-dblclick).

Let's see the implementation effect (partial code):

<template>
  <divclass="Table main">
    <el-table
      :data="tableData"
      @cell-dblclick="tableEdit"
    >
      <el-table-columnprop="name"label="姓名"width="150"></el-table-column>
      <el-table-columnprop="amount1"label="数值1"show-overflow-tooltip>
        <template#default="props">
          <span>{
    
    {props.row.amount1}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
​
<script>
      tableData: [
          {
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
        }
      ],
    // 双击表格修改数据
    tableEdit(row, column, cell, event) {
      if (column.label==='数值1'||column.label==='数值2'||column.label==='数值3') {
        constbeforeVal=event.target.textContent;
        event.target.innerHTML='';
        conststr=`<div class='cell'>
            <div class='el-input'>
              <input type='text' placeholder='请输入内容'>
            </div>
        </div>`;
        cell.innerHTML=str;
        //  获取双击后生成的input  而且根据层级嵌套还会有所变化
        constcellInput=cell.children[0].children[0].children[0];
        cellInput.value=beforeVal;
        cellInput.focus(); // input自动聚焦
        // 失去焦点后  将input移除
        cellInput.onblur=function () {
          constonblurCont=`<div class='cell'>${cellInput.value}</div>`;
          cell.innerHTML=onblurCont; // 换成原有的显示内容
        };
      }
    },
</script>

that's it! But is it really possible?

After taking a closer look, I feel that this writing method is still too limited and not flexible enough, so I give up using it.

Option II

Idea: Instead of using the cell-dblclick attribute of el-table, set a variable to monitor the double-click event to control the content displayed by the cell.

(partial code):

<el-table :data="tableData.data">
      <el-table-columnv-for="prop in tabHeader"
      :label="struct.fieldName"
      :prop="prop"
      align="center"
      >
        <template#default="scope">
          <divv-if="isEdit && scope.row.index === rowInd &&                            scope.column.index === colInd">
            <el-tooltip
                :content="desc">
              <el-inputv-if="struct.inputType === 'Input'&&
                struct.type==='Number'"
                v-model.number="scope.row[prop]"
                @blur="isEdit = false"
                @change="inputChange"
                ></el-input>
              <el-inputv-if="struct.inputType === 'Input'&&
              struct.type==='String'"
              v-model="scope.row[prop]"
              @blur="isEdit = false"
              @change="inputChange"
              ></el-input>
            </el-tooltip>
            <el-select
              v-if="struct.inputType === 'Select'"
              v-model="scope.row[prop]"
              @change="isEdit = false; inputChange()"
              >
              <el-optionv-for="opt in options"
                :label="opt" :value="opt" :key="opt"
              ></el-option>
            </el-select>
          </div>
          <divv-else@dblclick="dbCell(scope)"class="xiaoShou">
            {
    
    {scope.row[prop]}}
          </div>
        </template>
      </el-table-column>
    </el-table>
// 双击 出现输入框
constdbCell= (a: any) => {
    isEdit.value=true;
    rowInd.value=a.row.index;
    colInd.value=a.column.index;
};

This implementation method is simpler, more scalable, and conforms to writing habits.

What needs attention is to distinguish which cell is clicked, and the drop-down box cannot use blur.